:root{
  --p:#4f46e5;
  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow: 0 12px 30px rgba(17,24,39,.06);
  --radius: 16px;

  --danger:#dc3545;
  --success:#16a34a;
  --soft: rgba(79,70,229,.10);
}

*{ -webkit-tap-highlight-color: transparent; }

body{
  font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background: var(--bg);
  color: var(--text);
}

.container{ max-width:1180px; }

/* ===== Topbar ===== */
.topbar{
  position: sticky; top:0; z-index: 1020;
  background: rgba(246,247,251,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(229,231,235,.7);
}
.brand{
  font-weight:800; letter-spacing:-.02em; color:var(--p);
  display:flex; align-items:center; gap:.6rem;
}
.brand i{ filter: drop-shadow(0 6px 10px rgba(79,70,229,.18)); }

/* ===== Cards ===== */
.card{
  border:1px solid rgba(229,231,235,.8);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.card-header{
  border-bottom: 1px solid rgba(229,231,235,.7);
  background: transparent;
  font-weight: 700;
  padding: 14px 16px;
}

/* ===== Buttons ===== */
.btn{
  border-radius: 14px;
}
.btn-primary{
  background:var(--p); border-color:var(--p);
  box-shadow: 0 10px 18px rgba(79,70,229,.18);
}
.btn-primary:hover{ background:#4338ca; border-color:#4338ca; }
.btn-outline-primary:hover{
  background: rgba(79,70,229,.08);
}

/* icon buttons */
.action-btn{
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px;
}
.action-btn:active{ transform: translateY(1px); }

/* ===== Inputs ===== */
.form-control, .form-select, .input-group-text{
  border-radius: 14px;
  border-color: rgba(229,231,235,.9);
}
.input-group > .form-control{ border-top-left-radius: 0; border-bottom-left-radius:0; }
.input-group > .input-group-text{ border-top-right-radius:0; border-bottom-right-radius:0; }

.form-control:focus, .form-select:focus{
  border-color: rgba(79,70,229,.45);
  box-shadow: 0 0 0 .25rem rgba(79,70,229,.12);
}

/* ===== Tabs (pill) ===== */
.pill-nav .nav-link{
  border-radius: 999px;
  padding: .65rem 1rem;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid transparent;
}
.pill-nav .nav-link:hover{
  background:#fff;
  border-color: rgba(229,231,235,.9);
}
.pill-nav .nav-link.active{
  background: var(--p);
  color:#fff;
  box-shadow: 0 10px 20px rgba(79,70,229,.22);
}

/* ===== Stats ===== */
.stat{
  border-radius: var(--radius);
  padding: 14px 16px;
  border: 1px solid rgba(229,231,235,.8);
  background: linear-gradient(180deg,#fff, #fbfbff);
  position: relative;
  overflow: hidden;
}
.stat .ic{
  position:absolute; right:14px; top:10px;
  font-size: 2.2rem; opacity:.12;
  pointer-events:none;
}
.stat .k{
  font-size:.75rem; text-transform: uppercase;
  letter-spacing:.08em; color:var(--muted);
  font-weight:700;
}
.stat .v{ font-size:1.35rem; font-weight:800; margin-top:.25rem; }

.mono{
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

/* ===== Table ===== */
.table{
  --bs-table-bg: transparent;
}
.table thead th{
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  border-bottom-color: rgba(229,231,235,.85);
}
.table tbody td{
  border-top-color: rgba(229,231,235,.65);
}
.table-hover tbody tr:hover{
  background: rgba(79,70,229,.04);
}
.table td, .table th{ vertical-align: middle; }

/* ===== Badges ===== */
.badge-soft{
  border:1px solid rgba(229,231,235,.9);
  background:#fff;
  color:#111827;
  font-weight:700;
  border-radius:999px;
  padding:.35rem .7rem;
}

/* ===== Domains mobile cards ===== */
.domain-card{
  border:1px solid rgba(229,231,235,.85);
  border-radius: 16px;
  background:#fff;
  box-shadow: 0 10px 24px rgba(17,24,39,.05);
  padding: 14px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.domain-card:active{ transform: scale(.995); }
.domain-card .title{
  font-weight:800;
  color:#1d4ed8;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.domain-card .meta{ color:var(--muted); font-size:.85rem; }

/* ===== Sticky toolbar (Search + Filter) ===== */
.sticky-top{
  border-radius: var(--radius);
}
.sticky-top.card{
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
}
@media (max-width: 991px){
  .sticky-top{ top: 10px !important; }
  .container{ padding-left:14px; padding-right:14px; }
}

/* ===== Modal polish ===== */
.modal-content{
  border-radius: 16px;
  border: 1px solid rgba(229,231,235,.85);
  box-shadow: 0 18px 48px rgba(17,24,39,.12);
}

/* ===== Pagination area ===== */
.card-body.border-top{
  border-top-color: rgba(229,231,235,.75) !important;
}

/* ==============================
   ✅ HIGHLIGHT MERAH kalau status "Ada"
   ============================== */
.row-alert{
  background: rgba(220,53,69,.08) !important;
}
.row-alert:hover{
  background: rgba(220,53,69,.12) !important;
}
.row-alert td:first-child{
  border-left: 4px solid rgba(220,53,69,.55);
}
.card-alert{
  border-color: rgba(220,53,69,.45) !important;
  box-shadow: 0 10px 24px rgba(220,53,69,.12) !important;
}

/* ===== Small helpers ===== */
.small.text-muted{ color: var(--muted) !important; }