/* No floats. Only flex/grid. */

.muabbir-error{
  max-width:1100px;
  margin:12px auto;
  padding:10px 12px;
  border:1px solid #f5c6cb;
  background:#fdecea;
  border-radius:10px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.muabbir-muted{
  padding:10px 12px;
  background:#fff;
  border:1px solid #e8eaed;
  border-radius:10px;
}

.muabbir-block{
  max-width:1100px;
  margin:0 auto 20px auto;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.muabbir-block-title{
  font-size:18px;
  font-weight:700;
  margin:0 0 10px 0;
}

/* Jumbo */
.muabbir-status{
  max-width:720px;
  margin:0 auto 10px auto;
  padding:5px 10px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  border-radius: 50px;
}

.muabbir-status.is-online{
  background:#eafaf1;
  color:#1e8449;
  border: 1px solid green;
}

.muabbir-status.is-offline{
  background:#f4f6f7;
  color:#566573;
  border: 1px solid gray;
}

.muabbir-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex:0 0 auto;
}

.muabbir-dot.is-online{
  background:#2ecc71;
  box-shadow:0 0 0 4px rgba(46,204,113,.25);
}

.muabbir-dot.is-offline{
  background:#b2babb;
}

.muabbir-status-main{
  font-weight:700;
}

.muabbir-status-sub{
  font-size:12px;
  opacity:.85;
}

/* Cards */
/* Default: responsive grid */
.muabbir-cards{
  max-width:1100px;
  margin:0 auto 20px auto;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:12px;
}

/* Force 2 columns on narrower widths (2x2 look for 4 cards) */
@media (max-width: 900px){
  .muabbir-cards{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .muabbir-table .col-hide-mobile {
    display: none;
  }
}

/* On very small screens, drop to 1 column */
@media (max-width: 520px){
  .muabbir-cards{
    grid-template-columns: 1fr;
  }
}


.muabbir-card{
  background: rgba(255, 255, 255, 0.9);
  border-radius:12px;
  padding:12px 12px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  border-left:4px solid #e1e4ea;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:96px;
}

.muabbir-card-title{
  font-size:13px;
  font-weight:700;
}

.muabbir-card-number{
  font-size:24px;
  font-weight:800;
  line-height:1.2;
}

.muabbir-card-desc{
  font-size:12px;
  color:#626567;
}

.muabbir-accent-blue{ border-left-color:#5dade2; }
.muabbir-accent-green{ border-left-color:#58d68d; }
.muabbir-accent-gold{ border-left-color:#f4d03f; }
.muabbir-accent-purple{ border-left-color:#af7ac5; }

/* Latest rows */
.muabbir-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.muabbir-row{
  background:#fff;
  border-radius:12px;
  border:1px solid #e8eaed;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}

.muabbir-row-main{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.muabbir-row-content{
  border-top: 1px solid #e1e4ea;
  padding-top:8px;
  font-size:13px;
  color:#4b5563;
}

.muabbir-row-top{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.muabbir-sep{ opacity:.5; }

.muabbir-link{
  text-decoration:none;
  font-weight:600;
}

.muabbir-row-meta{
  font-size:12px;
  color:#6b7280;
}

.muabbir-row-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  flex:0 0 auto;
}

.muabbir-pill{
  font-weight:700;
  padding:2px 10px;
  border-radius:999px;
  background:#eef1f8;
}

.muabbir-pill-ok { background:#d4f8e1; color:#2ecc71; }
.muabbir-pill-wait { background:#fff4d1; color:#f1c40f; }
.muabbir-pill-bad { background:#fce2e5; color:#e74c3c; }
.muabbir-pill-neutral { background:#f5f5f7; color:#c8ccd4; }

.muabbir-mini-link{
  text-decoration:none;
}

/* Accent per status (border-left look-alike without floats) */
.muabbir-row.muabbir-ok{ border-left:4px solid #2ecc71; }
.muabbir-row.muabbir-wait{ border-left:4px solid #f1c40f; }
.muabbir-row.muabbir-bad{ border-left:4px solid #e74c3c; }
.muabbir-row.muabbir-neutral{ border-left:4px solid #c8ccd4; }

/* Table */
.muabbir-table-wrap{
  margin:0 auto;
}

.muabbir-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.muabbir-table th,
.muabbir-table td{
  padding:10px 10px;
  border:1px solid #e1e4ea;
}

.muabbir-table th{
  background:#eef1f8;
  text-align:left;
}

.muabbir-num{
  text-align:right;
}