/* ===============================
   Modern SaaS Green Theme
   - Works with Bootstrap 5
   - Tailwind-ish utilities
   - Light/Dark auto via prefers-color-scheme
   =============================== */

:root{
  --bg: #f6f8f7;
  --card: #ffffff;
  --text: #0f172a;            /* slate-900 */
  --muted: #6b7280;           /* gray-500 */
  --primary-50: #ecfdf5;
  --primary-100:#d1fae5;
  --primary-200:#a7f3d0;
  --primary-300:#6ee7b7;
  --primary-400:#34d399;
  --primary-500:#10b981;      /* emerald-500 */
  --primary-600:#059669;
  --primary-700:#047857;
  --primary-800:#065f46;
  --primary-900:#064e3b;
  --ring: rgba(16,185,129,.35);
  --shadow: 0 10px 25px -10px rgba(16,185,129,.25), 0 4px 10px -6px rgba(2,6,23,.12);
  --shadow-soft: 0 12px 30px -12px rgba(2,6,23,.18);
  --radius: 16px;
  --radius-lg: 22px;
  --radius-sm: 10px;
  --transition: .2s cubic-bezier(.22,.61,.36,1);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1220;         /* slate-950 */
    --card: #0f172a;       /* slate-900 */
    --text: #e5e7eb;       /* gray-200 */
    --muted: #9ca3af;      /* gray-400 */
    --shadow: 0 10px 25px -10px rgba(16,185,129,.25), 0 4px 10px -6px rgba(0,0,0,.5);
    --ring: rgba(52,211,153,.35);
  }
}

/* ===== Backgrounds untuk Public & Admin/User ===== */

/* Public (halaman utama) */
body.site-public{
  /* Fallback warna */
  background-color: #0b1220;
  /* Gambar */
  background-image: url('https://terapis.biz.id/storage/uploads/bg-admin.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

/* Admin & User dashboard */
body.site-admin,
body.site-user{
  background-color: #0b1220;
  background-image: url('https://terapis.biz.id/storage/uploads/bg-depan.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

/* Overlay lembut agar teks kontras di atas background foto */
body.site-public::before,
body.site-admin::before,
body.site-user::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(2,6,23,.60), rgba(2,6,23,.35) 30%, rgba(2,6,23,.20) 70%, rgba(2,6,23,.50)),
    radial-gradient(1200px 600px at 0% -20%, rgba(16,185,129,.20), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, rgba(16,185,129,.12), transparent 55%);
}

/* Pastikan konten berada di atas overlay */
.navbar, .container, .container-fluid, main, footer, .offcanvas{
  position: relative;
  z-index: 1;
}

/* Kartu & blok utama diberi efek glass agar tetap terbaca */
.card, .banner-cta, .list-group, .table, .alert{
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid rgba(255,255,255,.45);
}
@media (prefers-color-scheme: dark){
  .card, .banner-cta, .list-group, .table, .alert{
    background: rgba(15,23,42,.70);
    border-color: rgba(255,255,255,.12);
  }
}

/* Navbar transparan elegan di atas background */
.navbar{
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid rgba(255,255,255,.45);
}
@media (prefers-color-scheme: dark){
  .navbar{
    background: rgba(15,23,42,.70);
    border-bottom-color: rgba(255,255,255,.12);
  }
}

/* Hindari janky scroll di mobile: matikan fixed attachment */
@media (max-width: 991.98px){
  body.site-public,
  body.site-admin,
  body.site-user{
    background-attachment: scroll;
    background-position: center top;
  }
}

/* Base */
html,body{background:var(--bg); color:var(--text);}
a{color:var(--primary-600); text-decoration:none; transition:color var(--transition);}
a:hover{color:var(--primary-500);}

.container .card,
.card{border:0; border-radius:var(--radius); background:var(--card); box-shadow: var(--shadow-soft);}
.card-header{border:0; border-radius:var(--radius) var(--radius) 0 0; background:linear-gradient(120deg,var(--primary-50),transparent);}
.card-footer{border:0; background:transparent;}

/* Navbar */
.navbar{backdrop-filter:saturate(1.3) blur(6px); border-bottom:1px solid rgba(2,6,23,.06);}
.navbar .navbar-brand{font-weight:800; letter-spacing:.2px;}
.navbar .nav-link{position:relative; padding:.5rem .8rem; color:var(--text);}
.navbar .nav-link:hover{color:var(--primary-600);}
.navbar .nav-link:after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.2rem;
  height:2px; border-radius:2px; background:linear-gradient(90deg,var(--primary-400),var(--primary-600));
  transform:scaleX(0); transition:transform var(--transition);
}
.navbar .nav-link:hover:after{transform:scaleX(1);}

/* Buttons (override Bootstrap primary) */
.btn-primary{
  --bs-btn-bg: var(--primary-600);
  --bs-btn-border-color: var(--primary-600);
  --bs-btn-hover-bg: var(--primary-500);
  --bs-btn-hover-border-color: var(--primary-500);
  --bs-btn-focus-shadow-rgb: 16,185,129;
  --bs-btn-active-bg: var(--primary-700);
  --bs-btn-active-border-color: var(--primary-700);
  border-radius: 12px;
  box-shadow: 0 10px 18px -10px rgba(16,185,129,.6);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn-primary:hover{transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(16,185,129,.7);}
.btn-outline-primary{
  --bs-btn-color: var(--primary-600);
  --bs-btn-border-color: var(--primary-300);
  --bs-btn-hover-bg: var(--primary-50);
  --bs-btn-hover-border-color: var(--primary-500);
  border-radius: 12px;
}

/* Forms */
.form-control, .form-select{
  border:1px solid rgba(2,6,23,.08);
  background:var(--card);
  color:var(--text);
  border-radius:12px;
  transition:border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.form-control:focus, .form-select:focus{
  border-color: var(--primary-300);
  box-shadow: 0 0 0 6px var(--ring);
}
.input-group-text{border-radius:12px; background:rgba(2,6,23,.03);}

/* Badges & Pills */
.badge{border-radius:999px;}
.badge.bg-success-subtle{background:rgba(16,185,129,.12)!important; color:var(--primary-700)!important; border:1px solid rgba(16,185,129,.25);}
.badge.bg-primary-subtle{background:rgba(59,130,246,.12)!important; color:#1d4ed8!important; border:1px solid rgba(59,130,246,.25);}
.badge.bg-secondary-subtle{background:rgba(2,6,23,.06)!important; color:#475569!important; border:1px solid rgba(2,6,23,.12);}

/* Tables */
.table>thead{background:linear-gradient(180deg, rgba(2,6,23,.04), transparent);}
.table thead th{font-weight:700; color:var(--muted);}
.table-hover tbody tr:hover{background:rgba(16,185,129,.06);}

/* Alerts */
.alert{border:0; border-radius:14px; box-shadow: var(--shadow-soft);}
.alert-info{background:linear-gradient(120deg, rgba(16,185,129,.12), rgba(2,6,23,.02)); color:var(--primary-800);}
.alert-warning{background:linear-gradient(120deg, rgba(245,158,11,.16), rgba(2,6,23,.02));}

/* Carousel/Hero */
.carousel .carousel-item img{filter:saturate(1.05) contrast(1.05);}
.carousel-caption{backdrop-filter: blur(6px); background:linear-gradient(180deg, rgba(2,6,23,.25), rgba(2,6,23,.05)); border-radius:12px; padding:1rem 1.25rem;}
.carousel-control-next-icon, .carousel-control-prev-icon{filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));}

/* Cards & Hover effects */
.card.gradient{
  background: linear-gradient(180deg, var(--card), rgba(16,185,129,.06));
}
.hover-lift{transition: transform var(--transition), box-shadow var(--transition);}
.hover-lift:hover{transform: translateY(-4px); box-shadow: var(--shadow);}
.glass{
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px) saturate(1.2);
  border:1px solid rgba(255,255,255,.35);
}

/* Shadows */
.shadow-soft{ box-shadow: var(--shadow-soft)!important; }
.shadow-green{ box-shadow: 0 10px 24px -12px rgba(16,185,129,.45)!important; }

/* Utilities ala Tailwind */
.rounded-2xl{border-radius: var(--radius-lg)!important;}
.rounded-xl{border-radius: var(--radius)!important;}
.rounded-lg{border-radius: 12px!important;}
.text-muted{color: var(--muted)!important;}
.text-gradient{
  background: linear-gradient(90deg, var(--primary-600), var(--primary-400));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bg-gradient-green{
  background: radial-gradient(1200px 600px at 0% -20%, rgba(16,185,129,.18), transparent 60%),
              radial-gradient(1000px 500px at 100% 0%, rgba(16,185,129,.12), transparent 55%);
}
.ring-green{ box-shadow: 0 0 0 6px var(--ring)!important; }
.transition{transition: var(--transition)!important;}
.scale-101{transform: scale(1.01);}
.opacity-80{opacity:.8;}
.opacity-90{opacity:.9;}
.blur-2{filter: blur(2px);}
.border-subtle{border:1px solid rgba(2,6,23,.08);}

/* CTA ribbon / featured badge */
.badge-abs{
  position:absolute; top:.6rem; left:.6rem; z-index:3;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 8px 20px -10px rgba(0,0,0,.25);
}

/* Avatar image ratio */
.card-img-top{border-top-left-radius: var(--radius); border-top-right-radius: var(--radius);}
.img-cover{object-fit:cover;}
.img-160{height:160px;}
.img-260{height:260px;}

/* Pagination */
.pagination .page-link{
  border:0; margin:0 .125rem; border-radius:10px;
  color:var(--text); background:var(--card);
  box-shadow: 0 6px 14px -10px rgba(2,6,23,.18);
}
.pagination .page-item.active .page-link{
  color:#fff; background: linear-gradient(90deg,var(--primary-600),var(--primary-500));
  box-shadow: 0 10px 22px -12px rgba(16,185,129,.6);
}

/* Animations */
@keyframes floaty {
  0%{ transform: translateY(0) }
  50%{ transform: translateY(-4px) }
  100%{ transform: translateY(0) }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.floaty{animation: floaty 5s ease-in-out infinite;}
.shimmer{
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%; animation: shimmer 2s infinite;
}

/* Skeleton loader */
.skeleton{
  position:relative; overflow:hidden; background:rgba(2,6,23,.06); border-radius:12px; min-height:1rem;
}
.skeleton:after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  animation: shimmer 1.6s infinite;
}

/* Hero blob decoration */
.hero-blob{
  position:absolute; inset:auto; width:480px; height:480px;
  background: radial-gradient(circle at 30% 30%, rgba(16,185,129,.25), transparent 60%),
              radial-gradient(circle at 70% 60%, rgba(16,185,129,.18), transparent 65%);
  filter: blur(40px); z-index:0; pointer-events:none;
}

/* Footer */
.footer{
  background: linear-gradient(180deg, transparent, rgba(2,6,23,.06));
  border-top:1px solid rgba(2,6,23,.06);
}

/* Admin sidebar (if any) */
.admin-sidebar{
  background: linear-gradient(180deg, var(--card), rgba(16,185,129,.05));
  border-right:1px solid rgba(2,6,23,.06);
}
.admin-sidebar .list-group-item{
  border:0; background:transparent; color:var(--text);
}
.admin-sidebar .list-group-item.active{
  background: linear-gradient(90deg,var(--primary-600),var(--primary-500)); color:#fff;
  border-radius:12px;
}

/* Helper: focus-visible */
:focus-visible{
  outline: 3px solid var(--primary-300);
  outline-offset: 2px;
}

/* Small tweaks for cards grid responsiveness */
@media (max-width: 575.98px){
  .card-img-top.img-160{height:140px;}
  .carousel-caption{font-size:.9rem; padding:.65rem .8rem;}
}

/* Toast / badge status colors */
.badge-status-active{background:rgba(16,185,129,.1); color:var(--primary-700); border:1px solid rgba(16,185,129,.25);}
.badge-status-pending{background:rgba(245,158,11,.1); color:#b45309; border:1px solid rgba(245,158,11,.25);}
.badge-status-expired{background:rgba(2,6,23,.06); color:#475569; border:1px solid rgba(2,6,23,.12);}

/* Header bar glow */
.header-glow{
  background: linear-gradient(90deg, rgba(16,185,129,.18), transparent 30%, transparent 70%, rgba(16,185,129,.18));
  height: 3px; box-shadow: 0 10px 24px -16px rgba(16,185,129,.55);
}

/* CTA banner */
.banner-cta{
  border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(16,185,129,.15), rgba(16,185,129,.08) 60%, rgba(2,6,23,.02));
  border:1px solid rgba(16,185,129,.25);
  box-shadow: var(--shadow);
}

/* Chips */
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .6rem; border-radius:999px; font-size:.8rem;
  background:rgba(16,185,129,.1); color:var(--primary-700);
  border:1px solid rgba(16,185,129,.25);
}
.chip i{opacity:.8;}