/* ==========================================================
   BINA WARGA GLOBAL COLOR POLISH V5.22.0
   Visual only - no layout / business logic change
   ========================================================== */

:root {
  --bw-primary: #078765;
  --bw-primary-dark: #05664f;
  --bw-primary-soft: #eaf8f3;

  --bw-blue: #3b82f6;
  --bw-blue-soft: #edf5ff;

  --bw-purple: #8b5cf6;
  --bw-purple-soft: #f4efff;

  --bw-orange: #f59e0b;
  --bw-orange-soft: #fff7e6;

  --bw-cyan: #06b6d4;
  --bw-cyan-soft: #eafcff;

  --bw-rose: #ec4899;
  --bw-rose-soft: #fff0f7;

  --bw-surface: #ffffff;
  --bw-surface-soft: #f8fbfa;
  --bw-border: #dbe8e4;

  --bw-text: #102a25;
  --bw-muted: #6b7e79;

  --bw-shadow:
    0 8px 26px rgba(20, 68, 56, .06);
}


/* ==========================================================
   PAGE BACKGROUND
   ========================================================== */

html,
body {
  background:
    linear-gradient(
      135deg,
      #f5fbf9 0%,
      #f7fbff 48%,
      #faf7ff 100%
    ) !important;
}

main,
.bw-warga-main,
.bw-warga-workspace,
.sm-main,
.rtw-main {
  background: transparent !important;
}


/* ==========================================================
   HEADER / PAGE TITLES
   ========================================================== */

h1,
h2,
h3 {
  color: var(--bw-text);
}

.bw-warga-topbar,
.sm-topbar,
.rtw-topbar {
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.96),
      rgba(242,251,248,.96)
    ) !important;

  border-bottom-color:
    rgba(7,135,101,.12) !important;
}


/* ==========================================================
   GENERAL CARDS
   ========================================================== */

:is(
  .bw-warga-card,
  .bw-warga-section,
  .bw-warga-module-intro,
  .sm-card,
  .sm-item,
  .rtw-card,
  .rtw-panel,
  .card,
  .panel
) {
  border-color:
    var(--bw-border) !important;

  box-shadow:
    var(--bw-shadow) !important;
}


/* ==========================================================
   WARGA KPI CARDS
   ========================================================== */

.bw-warga-kpi {
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f6fcfa
    ) !important;

  border-color:
    #dcebe6 !important;

  box-shadow:
    var(--bw-shadow) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.bw-warga-kpi:hover {
  transform: translateY(-2px);

  box-shadow:
    0 12px 30px rgba(20,68,56,.10) !important;
}

.bw-warga-kpi:nth-child(4n+1) {
  border-top:
    3px solid var(--bw-primary) !important;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      var(--bw-primary-soft)
    ) !important;
}

.bw-warga-kpi:nth-child(4n+2) {
  border-top:
    3px solid var(--bw-blue) !important;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      var(--bw-blue-soft)
    ) !important;
}

.bw-warga-kpi:nth-child(4n+3) {
  border-top:
    3px solid var(--bw-purple) !important;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      var(--bw-purple-soft)
    ) !important;
}

.bw-warga-kpi:nth-child(4n+4) {
  border-top:
    3px solid var(--bw-orange) !important;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      var(--bw-orange-soft)
    ) !important;
}


/* ==========================================================
   KPI ICON COLORS
   ========================================================== */

.bw-warga-kpi:nth-child(4n+1)
.bw-warga-kpi-icon {
  background:
    var(--bw-primary-soft) !important;

  color:
    var(--bw-primary) !important;
}

.bw-warga-kpi:nth-child(4n+2)
.bw-warga-kpi-icon {
  background:
    var(--bw-blue-soft) !important;

  color:
    var(--bw-blue) !important;
}

.bw-warga-kpi:nth-child(4n+3)
.bw-warga-kpi-icon {
  background:
    var(--bw-purple-soft) !important;

  color:
    var(--bw-purple) !important;
}

.bw-warga-kpi:nth-child(4n+4)
.bw-warga-kpi-icon {
  background:
    var(--bw-orange-soft) !important;

  color:
    #c97800 !important;
}


/* ==========================================================
   RT / DESA KPI CARDS
   ========================================================== */

.sm-stats > *:nth-child(4n+1),
.sm-stat:nth-child(4n+1),
.rtw-stat:nth-child(4n+1) {
  border-top:
    3px solid var(--bw-primary) !important;

  background:
    linear-gradient(
      145deg,
      #fff,
      var(--bw-primary-soft)
    ) !important;
}

.sm-stats > *:nth-child(4n+2),
.sm-stat:nth-child(4n+2),
.rtw-stat:nth-child(4n+2) {
  border-top:
    3px solid var(--bw-blue) !important;

  background:
    linear-gradient(
      145deg,
      #fff,
      var(--bw-blue-soft)
    ) !important;
}

.sm-stats > *:nth-child(4n+3),
.sm-stat:nth-child(4n+3),
.rtw-stat:nth-child(4n+3) {
  border-top:
    3px solid var(--bw-purple) !important;

  background:
    linear-gradient(
      145deg,
      #fff,
      var(--bw-purple-soft)
    ) !important;
}

.sm-stats > *:nth-child(4n+4),
.sm-stat:nth-child(4n+4),
.rtw-stat:nth-child(4n+4) {
  border-top:
    3px solid var(--bw-orange) !important;

  background:
    linear-gradient(
      145deg,
      #fff,
      var(--bw-orange-soft)
    ) !important;
}


/* ==========================================================
   SECTION HEADERS
   ========================================================== */

:is(
  .bw-warga-card-head,
  .sm-card-head,
  .rtw-card-head
) {
  background:
    linear-gradient(
      90deg,
      rgba(7,135,101,.045),
      rgba(59,130,246,.025)
    );
}


/* ==========================================================
   SERVICE / LIST ITEMS
   ========================================================== */

:is(
  .bw-warga-service,
  .bw-warga-list > *,
  .sm-item,
  .rtw-item
) {
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

:is(
  .bw-warga-service,
  .bw-warga-list > *,
  .sm-item,
  .rtw-item
):hover {
  border-color:
    rgba(7,135,101,.28) !important;

  box-shadow:
    0 7px 20px rgba(20,68,56,.07) !important;

  transform:
    translateY(-1px);
}


/* ==========================================================
   BUTTONS
   ========================================================== */

:is(
  .bw-warga-btn.primary,
  .sm-btn.primary,
  .rtw-btn.primary,
  button.primary,
  .btn-primary
) {
  background:
    linear-gradient(
      135deg,
      var(--bw-primary),
      #0aa77d
    ) !important;

  border-color:
    transparent !important;

  box-shadow:
    0 6px 14px rgba(7,135,101,.18) !important;
}

:is(
  .bw-warga-btn.primary,
  .sm-btn.primary,
  .rtw-btn.primary,
  button.primary,
  .btn-primary
):hover {
  background:
    linear-gradient(
      135deg,
      var(--bw-primary-dark),
      var(--bw-primary)
    ) !important;
}


/* ==========================================================
   FORM FOCUS
   ========================================================== */

input:focus,
select:focus,
textarea:focus {
  border-color:
    rgba(7,135,101,.60) !important;

  box-shadow:
    0 0 0 3px
    rgba(7,135,101,.10) !important;

  outline: none !important;
}


/* ==========================================================
   BADGES / PILLS
   ========================================================== */

:is(
  .bw-warga-nav-badge,
  .badge,
  .pill,
  .sm-pill
) {
  box-shadow:
    0 2px 8px rgba(0,0,0,.05);
}


/* ==========================================================
   MODALS
   ========================================================== */

:is(
  .modal-content,
  .sm-modal,
  .rtw-modal,
  .bw-warga-modal
) {
  border:
    1px solid rgba(7,135,101,.14) !important;

  box-shadow:
    0 24px 70px rgba(12,46,39,.18) !important;
}


/* ==========================================================
   TABLES
   ========================================================== */

table thead th {
  background:
    linear-gradient(
      180deg,
      #f4faf8,
      #edf7f4
    ) !important;

  color:
    var(--bw-text) !important;
}

table tbody tr:hover {
  background:
    rgba(7,135,101,.035) !important;
}


/* ==========================================================
   STATUS / INFORMATION PANELS
   ========================================================== */

.bw-warga-binding.ok,
.success,
.alert-success {
  background:
    linear-gradient(
      90deg,
      #eaf9f3,
      #f5fffb
    ) !important;

  border-color:
    #b9e8d8 !important;
}

.warning,
.alert-warning {
  background:
    linear-gradient(
      90deg,
      #fff7e8,
      #fffdf7
    ) !important;
}


/* ==========================================================
   SIDEBAR POLISH
   Keep original dark branding but add subtle depth.
   ========================================================== */

.bw-warga-sidebar {
  background:
    linear-gradient(
      180deg,
      #061d32 0%,
      #071a2d 55%,
      #081726 100%
    ) !important;
}

.bw-warga-nav a.active {
  box-shadow:
    inset 3px 0 0
    var(--bw-primary) !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 768px) {

  .bw-warga-kpi {
    box-shadow:
      0 5px 16px rgba(20,68,56,.055) !important;
  }

}