*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#060000;
  --panel:#130000;
  --panel2:#1b0000;
  --line:#5a1515;
  --line2:#7c2020;
  --text:#fff;
  --muted:#a9a9a9;
  --red:#ff2525;
  --green:#00e26f;
  --orange:#ffa321;
  --blue:#37a8ff;
}
html,body{min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#060000;color:var(--text)}
body{overflow-x:hidden}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}

.monitor-shell{width:100%;padding:12px}
.monitor-card{
  width:100%;
  background:linear-gradient(180deg,#160000,#090000);
  border:1px solid #541010;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}

.monitor-head{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 18px;
  border-bottom:1px solid #3d0b0b;
}
.eyebrow{display:block;font-size:9px;font-weight:800;letter-spacing:1.5px;color:#ff6a6a;margin-bottom:4px}
.monitor-head h1{font-size:24px;line-height:1;font-weight:900}
.monitor-head p{margin-top:6px;font-size:11px;color:#bcbcbc}
.head-right{display:flex;gap:10px}
.timer-box,.clock-box{
  min-width:112px;padding:8px 12px;border:1px solid #4e1515;border-radius:10px;background:#0d0000;text-align:right
}
.timer-box span,.clock-box span{display:block;font-size:9px;color:#999}
.timer-box strong,.clock-box strong{font-size:13px}

.stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:12px 14px 8px}
.stat-card{padding:11px 13px;border:1px solid #4b1414;border-radius:9px;background:#120707}
.stat-card span{display:block;font-size:9px;font-weight:800;color:#aaa}
.stat-card strong{display:block;margin-top:4px;font-size:22px}
.stat-card.online{border-left:3px solid var(--green)}
.stat-card.warning{border-left:3px solid var(--orange)}
.stat-card.offline{border-left:3px solid var(--red)}
.stat-card.online strong{color:var(--green)}
.stat-card.warning strong{color:var(--orange)}
.stat-card.offline strong{color:#ff5a5a}
.stat-card.nawala {
  border-left:3px solid #ff2525;
}

.stat-card.nawala strong {
  color:#ff4242;
}

.toolbar{
  display:grid;
  grid-template-columns:minmax(240px,1fr) auto auto;
  gap:10px;
  align-items:center;
  padding:8px 14px;
}
.search-wrap input{
  width:100%;height:38px;border:1px solid #512323;border-radius:8px;background:#090909;color:#fff;padding:0 12px;outline:none
}
.search-wrap input:focus{border-color:#d72a2a}
.filter-tabs{display:flex;gap:5px}
.filter-btn{
  height:34px;padding:0 11px;border:1px solid #4d2020;border-radius:8px;background:#0e0707;color:#bbb;font-size:10px;font-weight:800
}
.filter-btn.active{background:#330000;border-color:#ff2b2b;color:#fff}
.toolbar-actions{display:flex;gap:6px}
.btn{
  min-height:36px;padding:0 11px;border:1px solid #6b1e1e;border-radius:8px;background:#0c0606;color:#fff;font-size:9px;font-weight:900
}
.btn:hover{border-color:#ff2b2b}
.btn.primary{background:#3b0000;border-color:#ff2525}
.btn.danger{border-color:#9d2424;color:#ff7474}
.btn.wide{width:100%;height:40px;margin-top:14px}

.summary-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:4px 14px 10px}
.summary-row>div{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border:1px solid #441515;border-radius:7px;background:#0b0505}
.summary-row span{font-size:8px;color:#999}
.summary-row strong{font-size:9px;color:#fff}

.domain-list-panel{margin:0 14px 12px;border:1px solid #4d1111;border-radius:9px;overflow:hidden;background:#080404}
.domain-list-head {
  display: grid !important;

  grid-template-columns:
    minmax(0,1fr)
    105px
    105px
    95px
    28px !important;

  gap: 8px !important;
  align-items: center !important;

  padding: 8px 12px !important;

  background: #3a0000 !important;
  color: #fff !important;

  font-size: 9px !important;
  font-weight: 900 !important;
}
.domain-row{border-top:1px solid rgba(255,255,255,.055)}
.domain-row:first-child{border-top:0}
.domain-main {
  width: 100% !important;

  display: grid !important;

  grid-template-columns:
    minmax(0,1fr)
    105px
    105px
    95px
    28px !important;

  gap: 8px !important;
  align-items: center !important;

  min-height: 54px !important;

  padding: 7px 12px !important;

  border: 0 !important;

  background: #0b0505 !important;
  color: #fff !important;

  text-align: left !important;
}
.domain-main:hover{background:#150606}
.domain-identity{min-width:0;display:flex;align-items:center;gap:9px}
.domain-icon{
  flex:0 0 28px;width:28px;height:28px;border:1px solid #244b5a;border-radius:7px;
  display:grid;place-items:center;color:#3abfff;font-size:13px;background:#07151c
}
.domain-text{min-width:0}
.domain-name{
  display:block;font-size:11px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff
}
.domain-url{
  display:block;margin-top:3px;font-size:9px;color:#4aa7ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:650px
}
.status-badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:84px;height:27px;
  border-radius:8px;border:1px solid;font-size:9px;font-weight:900
}
.status-badge.online{color:#29f28a;border-color:#0b6a43;background:#062a1b}
.status-badge.warning{color:#ffc262;border-color:#855a14;background:#2b1a02}
.status-badge.offline{color:#ff6e6e;border-color:#7a1d1d;background:#2b0808}
.status-badge.checking{color:#68b7ff;border-color:#28577b;background:#071c2b}
.response{font-size:10px;color:#ddd}
.chevron{font-size:13px;color:#999;text-align:center;transition:.18s}
.domain-row.open .chevron{transform:rotate(180deg)}

.domain-detail{
  display:none;
  grid-template-columns:repeat(4,minmax(0,1fr)) auto;
  gap:8px;
  align-items:center;
  padding:9px 48px 11px;
  background:#080202;
  border-top:1px solid #2e0b0b
}
.domain-row.open .domain-detail{display:grid}
.detail-item{min-width:0}
.detail-item span{display:block;font-size:7px;color:#8e8e8e;margin-bottom:3px}
.detail-item strong{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.domain-actions{display:flex;gap:5px;justify-content:flex-end}
.domain-actions button{height:28px;padding:0 9px;border-radius:7px;border:1px solid #642020;background:#0d0606;color:#fff;font-size:8px;font-weight:800}
.domain-actions .delete{border-color:#8d2525;color:#ff6666}

.empty-state{text-align:center;padding:28px;color:#8d8d8d;font-size:10px}

.history-panel{margin:0 14px 14px;border:1px solid #441313;border-radius:9px;overflow:hidden}
.history-toggle{
  width:100%;height:38px;display:flex;justify-content:space-between;align-items:center;padding:0 12px;
  border:0;background:#150606;color:#fff;font-size:9px;font-weight:900
}
.history-toggle strong{min-width:24px;padding:3px 6px;border-radius:999px;background:#3b0000;color:#ff7a7a}
.history-body{padding:8px;background:#090404}
.history-actions{text-align:right;margin-bottom:7px}
.history-item{
  display:grid;grid-template-columns:minmax(0,1fr) 90px 125px 125px 70px;
  gap:8px;align-items:center;padding:8px;border-top:1px solid #2e0b0b;font-size:8px
}
.history-item:first-child{border-top:0}
.history-item .hname{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-item .muted{color:#999}

.modal{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.72)
}
.modal-card{
  width:min(460px,100%);padding:18px;border:1px solid #8c2020;border-radius:14px;background:#160606;box-shadow:0 20px 50px rgba(0,0,0,.55)
}
.modal-card.large{width:min(650px,100%)}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.modal-head h2{font-size:16px}
.modal-close{width:30px;height:30px;border:1px solid #6b2020;border-radius:8px;background:#0a0505;color:#fff;font-size:18px}
.modal-card label{display:block;margin:10px 0 5px;font-size:9px;color:#bbb}
.modal-card input,.modal-card select,.modal-card textarea{
  width:100%;border:1px solid #552222;border-radius:8px;background:#080808;color:#fff;outline:none
}
.modal-card input,.modal-card select{height:39px;padding:0 10px}
.modal-card textarea{padding:10px;resize:vertical}
.modal-help{font-size:9px;color:#999;margin-bottom:8px}

.toast-container{position:fixed;right:16px;top:16px;z-index:2000;display:grid;gap:7px}
.toast{
  min-width:230px;max-width:330px;padding:10px 12px;border-radius:9px;border:1px solid;background:#0c0707;
  box-shadow:0 10px 30px rgba(0,0,0,.4);animation:toastIn .18s ease-out
}
.toast strong{display:block;font-size:10px}
.toast small{display:block;margin-top:3px;font-size:8px;color:#bbb}
.toast.online{border-color:#17613e}
.toast.warning{border-color:#805916}
.toast.offline{border-color:#802222}
@keyframes toastIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media (max-width:1050px){
  .toolbar{grid-template-columns:1fr}
  .toolbar-actions{flex-wrap:wrap}
  .filter-tabs{flex-wrap:wrap}
}
@media (max-width:760px){

  .stats-grid,
  .summary-row {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .monitor-head {
    align-items:flex-start;
  }

  .head-right {
    flex-direction:column;
  }

  .domain-list-head {
    grid-template-columns:
      minmax(0,1fr)
      78px
      78px
      72px
      22px;
  }

  .domain-main {
    grid-template-columns:
      minmax(0,1fr)
      78px
      78px
      72px
      22px;
  }

  .domain-url {
    max-width:220px;
  }

  .status-badge,
  .nawala-badge {
    min-width:68px !important;
    height:25px !important;
    font-size:8px !important;
    padding:0 5px !important;
  }

  .response {
    font-size:9px;
  }

  .domain-detail {
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    padding-left:12px;
  }

  .domain-actions {
    grid-column:1/-1;
    justify-content:flex-start;
  }

}

/* =========================================
   DOMAIN LIST - FIXED HEIGHT + INTERNAL SCROLL
========================================= */

.domain-list-panel {
  height: 700px !important;
  max-height: 700px !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;
}

/* header DOMAIN / STATUS / RESPONSE tetap diam */
.domain-list-head {
  flex: 0 0 auto !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
}

/* hanya isi domain yang scroll */
.domain-list {
  flex: 1 1 auto !important;

  min-height: 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  scrollbar-width: thin;
}

/* scrollbar chrome / edge */
.domain-list::-webkit-scrollbar {
  width: 7px;
}

.domain-list::-webkit-scrollbar-track {
  background: #090000;
}

.domain-list::-webkit-scrollbar-thumb {
  background: #7a1515;
  border-radius: 10px;
}

.domain-list::-webkit-scrollbar-thumb:hover {
  background: #b51d1d;
}

/* =========================================
   STATUS NAWALA
========================================= */

.nawala-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 78px;
  height: 27px;

  padding: 0 9px;

  border-radius: 8px;
  border: 1px solid;

  font-size: 9px;
  font-weight: 900;
}


/* AMAN */
.nawala-badge.aman {
  color: #2cff88;
  border-color: #087a48;
  background: rgba(0, 130, 70, 0.18);

  box-shadow:
    0 0 6px rgba(0, 255, 120, 0.10);
}


/* TERKENA NAWALA */
.nawala-badge.nawala {
  color: #ff6969;
  border-color: #a51e1e;
  background: rgba(150, 0, 0, 0.22);

  box-shadow:
    0 0 7px rgba(255, 20, 20, 0.18);
}


/* BELUM DIPERIKSA */
.nawala-badge.unknown {
  color: #aaa;
  border-color: #444;
  background: rgba(255,255,255,.03);
}

/* =====================================================
   NAWALA - HEADER / CONTROL TETAP DI ATAS SAAT SCROLL
===================================================== */

.monitor-card {
  position: relative !important;
}

/* bagian atas tetap terlihat */
.monitor-head,
.stats-grid,
.toolbar,
.summary-row {
  position: sticky !important;
  z-index: 40 !important;
}

/* susunan posisi sticky */
.monitor-head {
  top: 0 !important;
  background: #130000 !important;
}

.stats-grid {
  top: 78px !important;
  background: #100000 !important;
}

.toolbar {
  top: 151px !important;
  background: #100000 !important;
}

.summary-row {
  top: 199px !important;
  background: #100000 !important;
}

/* header DOMAIN / AKSES / STATUS / RESPONSE */
.domain-list-head {
  position: sticky !important;
  top: 239px !important;
  z-index: 45 !important;
  background: #3a0000 !important;
}

/* cegah konten terlihat tembus */
.monitor-head,
.stats-grid,
.toolbar,
.summary-row,
.domain-list-head {
  box-shadow: 0 2px 0 rgba(0,0,0,.35);
}

/* =====================================================
   NAWALA FIXED DASHBOARD
   HANYA DAFTAR DOMAIN YANG SCROLL
===================================================== */

html,
body {
  height:100% !important;
  overflow:hidden !important;
}


/* seluruh halaman Nawala */
.monitor-shell {
  width:100% !important;

  height:100vh !important;
  max-height:100vh !important;

  padding:12px !important;

  overflow:hidden !important;
}


/* card utama */
.monitor-card {
  width:100% !important;

  height:calc(100vh - 24px) !important;
  max-height:calc(100vh - 24px) !important;

  display:flex !important;
  flex-direction:column !important;

  overflow:hidden !important;
}


/* ==================================
   BAGIAN ATAS TIDAK BERGERAK
================================== */

.monitor-head,
.stats-grid,
.toolbar,
.summary-row {
  flex:0 0 auto !important;

  position:relative !important;
  top:auto !important;

  z-index:20 !important;
}


/* ==================================
   AREA TABLE
================================== */

.domain-list-panel {
  flex:1 1 auto !important;

  width:auto !important;

  height:auto !important;
  max-height:none !important;

  min-height:0 !important;

  margin:0 14px 8px !important;

  display:flex !important;
  flex-direction:column !important;

  overflow:hidden !important;
}


/* judul kolom tidak ikut scroll */
.domain-list-head {
  flex:0 0 auto !important;

  position:relative !important;
  top:auto !important;

  z-index:30 !important;
}


/* ==================================
   HANYA BARIS DOMAIN YANG SCROLL
================================== */

.domain-list {
  flex:1 1 auto !important;

  min-height:0 !important;

  overflow-y:auto !important;
  overflow-x:hidden !important;

  overscroll-behavior:contain;
}


/* Riwayat tetap di bagian bawah */
.history-panel {
  flex:0 0 auto !important;

  margin:0 14px 12px !important;
}