/* ==========================================================
   SoilTech Brand CSS v1.0 — soiltech.my.id
   Identitas: Strata Signal · Juli 2026
   Layer tampilan saja — tidak mengubah struktur/fungsi.
   Di-load SETELAH Bootstrap agar override berlaku.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --st-humus:    #221A12;
  --st-tanah:    #8B5E34;
  --st-lempung:  #BE8B57;
  --st-air:      #0E7C7B;
  --st-air-dark: #0A5F5E;
  --st-air-muda: #2BB3AE;
  --st-sinyal:   #E8A13D;
  --st-kabut:    #F3F5F2;
  --st-online:   #2E9E4F;
  --st-late:     #E8A13D;
  --st-offline:  #C4453A;

  /* Bootstrap 5 variable bridge */
  --bs-primary: var(--st-air);
  --bs-primary-rgb: 14, 124, 123;
  --bs-link-color: var(--st-air);
  --bs-link-hover-color: var(--st-air-dark);
  --bs-body-bg: var(--st-kabut);
  --bs-body-color: var(--st-humus);
}

/* ---------- Base ---------- */
body {
  background-color: var(--st-kabut);
  color: var(--st-humus);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

h1, h2, h3, .navbar-brand, .st-heading {
  font-family: 'Chakra Petch', 'Inter', sans-serif;
  font-weight: 600;
}

a { color: var(--st-air); }
a:hover { color: var(--st-air-dark); }

/* ---------- Navbar & footer ---------- */
.navbar.bg-dark, .navbar-dark, nav.navbar {
  background-color: var(--st-humus) !important;
}
.navbar-brand img { height: 32px; }
.navbar .nav-link { color: rgba(243, 245, 242, .85); }
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--st-air-muda); }

footer, footer.bg-dark {
  background-color: var(--st-humus) !important;
  color: var(--st-kabut);
}

/* ---------- Tombol ---------- */
.btn-primary {
  --bs-btn-bg: var(--st-air);
  --bs-btn-border-color: var(--st-air);
  --bs-btn-hover-bg: var(--st-air-dark);
  --bs-btn-hover-border-color: var(--st-air-dark);
  --bs-btn-active-bg: var(--st-air-dark);
  --bs-btn-active-border-color: var(--st-air-dark);
}
.btn-outline-primary {
  --bs-btn-color: var(--st-air);
  --bs-btn-border-color: var(--st-air);
  --bs-btn-hover-bg: var(--st-air);
  --bs-btn-hover-border-color: var(--st-air);
  --bs-btn-active-bg: var(--st-air-dark);
}
.btn-warning {
  --bs-btn-bg: var(--st-sinyal);
  --bs-btn-border-color: var(--st-sinyal);
}

/* ---------- Kartu & tabel ---------- */
.card {
  border: 1px solid #e4e2dc;
  border-radius: 12px;
}
.card-header {
  background-color: #fff;
  border-bottom: 2px solid var(--st-air);
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 600;
}
.table thead th {
  color: var(--st-tanah);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .8rem;
}

/* ---------- Badge & status perangkat ---------- */
.badge.bg-primary { background-color: var(--st-air) !important; }
.badge.bg-warning { background-color: var(--st-late) !important; color: #fff; }

.st-status { 
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 600; font-size: .82rem;
}
.st-status::before {
  content: ''; width: .6em; height: .6em; border-radius: 50%;
  background: currentColor;
}
.st-status.online  { color: var(--st-online); }
.st-status.late    { color: var(--st-late); }
.st-status.offline { color: var(--st-offline); }

.badge.st-online  { background-color: var(--st-online) !important; }
.badge.st-late    { background-color: var(--st-late) !important; }
.badge.st-offline { background-color: var(--st-offline) !important; }

/* ---------- Metric card dashboard ---------- */
.st-metric {
  background: #fff; border: 1px solid #e4e2dc; border-radius: 12px;
  padding: 1rem 1.15rem;
}
.st-metric .st-metric-label {
  color: var(--st-tanah); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 600;
}
.st-metric .st-metric-value {
  font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 1.65rem; font-weight: 600; color: var(--st-humus);
}
.st-metric .st-metric-unit { color: var(--st-air); font-size: .95rem; }

/* ---------- Aksen kecil ---------- */
.text-brand { color: var(--st-air) !important; }
.text-soil  { color: var(--st-tanah) !important; }
hr { border-color: #ddd9d0; }
::selection { background: var(--st-air-muda); color: #fff; }