/* =======================================================
   app.css – Custom styling for TerapiBiz Dashboard & App
   Compatible: Bootstrap 4.6 / SB Admin 2
   Author: Herman @ TerapiBiz
   ======================================================= */

:root{
  --bg:#f7fafc;
  --surface:#ffffff;
  --muted:#6b7280;
  --text:#0f172a;
  --brand:#16a34a;
  --brand-600:#16a34a;
  --brand-700:#15803d;
  --ring:rgba(22,163,74,.35);
  --card:#ffffff;
  --shadow:0 8px 24px rgba(15,23,42,.08);
  --radius:18px;
}

/* === Dashboard Background === */
body.bg-dashboard{
  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.92)),
    url("https://img.freepik.com/fotos-premium/imagen-fondo_910766-187.jpg?w=826") center/cover no-repeat fixed;
}

/* === Non-Dashboard Background === */
body.bg-app{
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.95)),
    url("https://terapis.biz.id/storage/uploads/bg-admin.jpg") center/cover no-repeat fixed;
}

/* Readability over photo backgrounds */
.card,
.alert,
.navbar,
.list-group-item,
.modal-content,
.table,
.form-control,
.form-select {
  background-color: rgba(255,255,255,.86);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

/* Responsive: prevent fixed bg on small devices */
@media (max-width:768px){
  body.bg-dashboard, body.bg-app{
    background-attachment: scroll;
    background-position: center top;
  }
}

/* Base Typography */
*{box-sizing:border-box}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 600px at 10% -20%, #e8fff2 0%, rgba(255,255,255,0) 40%),
    radial-gradient(1000px 500px at 110% -10%, #e6f3ff 0%, rgba(255,255,255,0) 35%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

/* ===================== COMPONENTS ===================== */

/* Card */
.card{
  background:var(--card);
  border:1px solid rgba(15,23,42,.06)!important;
  border-radius: var(--radius)!important;
  box-shadow: var(--shadow);
}
.card-hover{transition:transform .15s ease, box-shadow .2s ease}
.card-hover:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(15,23,42,.12)}

/* Buttons */
.btn-primary{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-700);
  --bs-btn-hover-border-color: var(--brand-700);
  --bs-btn-active-bg: var(--brand-700);
  --bs-btn-focus-shadow-rgb: 22,163,74;
  box-shadow: 0 6px 16px rgba(22,163,74,.25);
}
.btn-outline-primary{
  color:var(--brand)!important; border-color:var(--brand)!important;
}
.btn-outline-primary:hover{
  color:#fff!important; background:var(--brand)!important; border-color:var(--brand)!important;
}

/* Form Controls */
.form-control, .form-select{
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  background:#ffffff;
}
.form-control:focus, .form-select:focus{
  box-shadow:0 0 0 .25rem var(--ring);
  border-color: var(--brand-600);
}

/* Badges & Chips */
.badge-soft{
  background:#f1f5f9;
  color:#0f172a;
  border:1px solid rgba(15,23,42,.08);
  border-radius:999px;
  padding:.45rem .7rem;
  font-weight:600;
}

/* Tables */
.table{
  --bs-table-bg:#fff;
  --bs-table-striped-bg:#f8fafc;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.06);
}

/* Footer */
.footer{
  background: linear-gradient(180deg, rgba(255,255,255,.7), #ffffff);
  border-top:1px solid rgba(15,23,42,.08);
}

/* Utility */
.text-muted{color:var(--muted)!important}
.rounded-2xl{border-radius:24px}
.shadow-soft{box-shadow: var(--shadow)}
.max-w-3xl{max-width:64rem}
.container-narrow{max-width: 1000px; margin-inline:auto}

/* ===================== DASHBOARD SPECIFIC ===================== */
.sb-admin .sidebar{
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
}
.sb-admin .sidebar .nav-item .nav-link{
  color:#fff!important;
}
.sb-admin .topbar{
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(4px);
}
.sb-admin .navbar-nav .nav-item .nav-link{
  color:#0f172a;
}

/* Override card header text color */
.sb-admin .card-header{
  background:rgba(255,255,255,.9);
  font-weight:600;
  border-bottom:1px solid rgba(15,23,42,.08);
}

/* Hover & focus effects */
a:hover, .nav-link:hover{
  opacity:.9;
  transition:all .2s ease;
}

/* Scrollbar styling (modern browsers) */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{
  background:rgba(22,163,74,.4);
  border-radius:4px;
}
::-webkit-scrollbar-thumb:hover{
  background:rgba(22,163,74,.7);
}