/* ==========================================================================
   RBS SUPPORT SYSTEM - Design System (mobile-first)
   Warna brand via variabel CSS -> ganti di :root, tidak perlu ubah source lain
   ========================================================================== */

:root{
  --rbs-primary:#0d2c01;
  --rbs-primary-dark:#A51F1F;
  --rbs-secondary:#558b2f;
  --rbs-accent:#F9A825;
  --rbs-bg:#f6f7fb;
  --rbs-card:#ffffff;
  --rbs-text:#212529;
  --rbs-muted:#6c757d;
  --rbs-radius:14px;
  --rbs-bottomnav-h:60px;
}

body{
  background:var(--rbs-bg);
  color:var(--rbs-text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  padding-bottom:calc(var(--rbs-bottomnav-h) + env(safe-area-inset-bottom));
}

/* --------------------------------------------------------------- komponen */
.navbar-rbs{background:var(--rbs-primary);}
.btn-rbs{background:var(--rbs-primary);color:#fff;border:none;}
.btn-rbs:hover{background:var(--rbs-primary-dark);color:#fff;}
.btn-rbs:focus{box-shadow:0 0 0 .25rem rgba(13, 44, 1,.25);}
.bg-rbs{background-color:var(--rbs-primary)!important;}
.text-rbs{color:var(--rbs-primary)!important;}

.card-rbs{border:0;border-radius:var(--rbs-radius);box-shadow:0 1px 3px rgba(0,0,0,.06);}
.hero-rbs{background:linear-gradient(135deg,#fff 55%,#fdeaea);border-radius:var(--rbs-radius);}

/* quick action card */
.qa-card{border:0;border-radius:var(--rbs-radius);box-shadow:0 1px 3px rgba(0,0,0,.06);transition:transform .15s ease;}
.qa-card:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.10);}

/* clamp judul 2 baris */
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* ------------------------------------------------------- sidebar (desktop) */
.sidebar{
  position:fixed;top:56px;left:0;bottom:0;width:230px;
  background:var(--rbs-card);border-right:1px solid #e9ecef;
  padding:1rem .75rem;overflow-y:auto;z-index:1020;
}
.sidebar-link{
  display:flex;align-items:center;padding:.55rem .8rem;border-radius:10px;
  color:var(--rbs-text);text-decoration:none;margin-bottom:2px;font-size:.92rem;
}
.sidebar-link:hover{background:#f1f3f9;}
.sidebar-link.active{background:var(--rbs-primary);color:#fff;font-weight:600;}
.main-content-with-sidebar{margin-left:0;}

/* ---------------------------------------------------- bottom nav (mobile) */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:1030;
  height:calc(var(--rbs-bottomnav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:#fff;border-top:1px solid #e9ecef;display:flex;
}
.bottom-nav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;color:var(--rbs-muted);text-decoration:none;font-size:.68rem;
}
.bottom-nav a i{font-size:1.15rem;}
.bottom-nav a.active{color:var(--rbs-primary);font-weight:600;}

/* ------------------------------------------------------------- breakpoint */
@media(min-width:992px){
  body{padding-bottom:0;}
  .main-content-with-sidebar{margin-left:230px;}
}

/* ===== EFEK HOVER (interaktif) ===== */
  .menu-card:hover {
    transform: translateY(-6px);
    border-color: var(--rbs-primary);
    box-shadow: 0 14px 28px rgba(13,44,1,.15);
  }
  .menu-card:hover::before  { transform: translateX(-50%) scale(1); }
  .menu-card:hover img      { transform: scale(1.15) rotate(-4deg); }
  .menu-card:hover span     { color: var(--rbs-primary); }
  .menu-card:hover span::after { width: 40%; }

  /* efek klik */
  .menu-card:active { transform: translateY(-2px) scale(.97); }