/* =========================================================
   PPID RSUD MAMPANG PRAPATAN — Modern Theme
   Palette selaras project "web": #234974 / #357880 / #4ba88e
   ========================================================= */
:root{
  --primary:#234974; --primary-dark:#16314f; --secondary:#357880;
  --accent:#4ba88e; --dark:#0f2540; --light:#f5f8fb;
  --text:#33414f; --muted:#7c8a99; --ring:rgba(35,73,116,.15);
  --radius:16px; --shadow:0 10px 30px -12px rgba(15,37,64,.18);
  --shadow-sm:0 4px 14px -6px rgba(15,37,64,.16);
  --max:1600px;
  --bs-primary:#234974; --bs-primary-rgb:35,73,116;
}
*{font-family:'Segoe UI','DM Sans',system-ui,-apple-system,sans-serif}
html{scroll-behavior:smooth}
body{color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none}
img{max-width:100%}
::selection{background:var(--accent);color:#fff}

/* Full width containers */
/* Full-width: semua container memenuhi layar dengan padding adaptif */
.container,.container-lg,.container-xl,.container-fluid{max-width:100%!important;padding-left:clamp(1rem,3.5vw,3.5rem);padding-right:clamp(1rem,3.5vw,3.5rem)}
@media(max-width:575px){.container,.container-lg,.container-xl,.container-fluid{padding-left:1rem;padding-right:1rem}}

/* ---------- Color utility overrides ---------- */
.bg-primary{background:var(--primary)!important}
.text-primary{color:var(--primary)!important}
.text-secondary{color:var(--secondary)!important}
.text-success{color:var(--accent)!important}
.text-info{color:var(--secondary)!important}
.bg-light{background:var(--light)!important}
.bg-dark{background:var(--dark)!important}
.btn-primary{background:var(--primary);border-color:var(--primary)}
.btn-primary:hover,.btn-primary:focus{background:var(--primary-dark);border-color:var(--primary-dark);box-shadow:0 8px 20px -8px var(--ring)}
.btn-success{background:var(--accent);border-color:var(--accent)}
.btn-success:hover{background:#3d9279;border-color:#3d9279}
.btn-info{background:var(--secondary);border-color:var(--secondary);color:#fff}
.btn-info:hover{background:#2c646b;color:#fff}
.btn-outline-primary{color:var(--primary);border-color:var(--primary)}
.btn-outline-primary:hover{background:var(--primary);border-color:var(--primary)}
.btn{border-radius:10px;font-weight:600;padding:.55rem 1.3rem;transition:.25s}
.btn-lg{border-radius:12px;padding:.8rem 1.8rem}
.badge.bg-primary{background:var(--primary)!important}
.link-accent{color:var(--accent)}

/* ---------- Topbar ---------- */
.topbar{background:linear-gradient(90deg,var(--primary-dark),var(--secondary));color:#dbe7f2;font-size:.82rem}
.topbar a{color:#fff;opacity:.85}.topbar a:hover{opacity:1}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding-top:.45rem;padding-bottom:.45rem;flex-wrap:wrap;gap:.5rem}
.topbar .topbar-main{opacity:1;font-weight:700;background:rgba(255,255,255,.14);padding:.2rem .7rem;border-radius:20px;transition:.2s}
.topbar .topbar-main:hover{background:var(--accent)}
.topbar .topbar-sep{opacity:.35}

/* ---------- Navbar ---------- */
.navbar{background:#fff!important;box-shadow:var(--shadow-sm);padding:.6rem 0}
.navbar .navbar-brand{display:flex;align-items:center;gap:.7rem;color:var(--primary)!important;font-weight:800;font-size:1.05rem;line-height:1.1}
.navbar .navbar-brand .brand-logo{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--secondary));display:grid;place-items:center;color:#fff;font-size:1.3rem;flex:0 0 auto}
.navbar .navbar-brand small{display:block;font-size:.7rem;font-weight:500;color:var(--muted)}
.navbar .nav-link{color:var(--text)!important;font-weight:600;font-size:.92rem;padding:.55rem .85rem!important;border-radius:9px;transition:.2s}
.navbar .nav-link:hover,.navbar .nav-link.active{color:var(--primary)!important;background:var(--light)}
.navbar .dropdown-menu{border:0;box-shadow:var(--shadow);border-radius:14px;padding:.5rem;margin-top:.4rem}
.navbar .dropdown-item{border-radius:9px;font-size:.9rem;font-weight:500;padding:.55rem .8rem}
.navbar .dropdown-item:hover{background:var(--light);color:var(--primary)}
.navbar .btn-nav{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff!important}
.navbar .navbar-brand .brand-text{display:flex;flex-direction:column}

/* ---------- Offcanvas (menu mobile) ---------- */
.offcanvas-lg{--bs-offcanvas-width:300px}
.offcanvas .offcanvas-header{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff}
.offcanvas .offcanvas-header .brand-logo{background:rgba(255,255,255,.18);color:#fff}
.offcanvas .offcanvas-header .btn-close{filter:invert(1) grayscale(1) brightness(2)}
.navbar-toggler{border:0;padding:.35rem .55rem;background:var(--light);border-radius:10px}
.navbar-toggler:focus{box-shadow:none}
@media(max-width:991.98px){
  .navbar{padding:.5rem 0}
  .navbar .navbar-brand .brand-text{font-size:.9rem;line-height:1.05}
  .navbar .navbar-brand .brand-text small{font-size:.62rem}
  .navbar .navbar-brand .brand-logo{width:40px;height:40px;font-size:1.05rem}
  .offcanvas-lg .navbar-nav{gap:1px;width:100%}
  .offcanvas-lg .nav-link{padding:.75rem .7rem!important;border-radius:10px;border-bottom:1px solid #eef2f6;font-size:.95rem}
  .offcanvas-lg .nav-item.dropdown>.dropdown-toggle::after{float:right;margin-top:.6rem}
  .offcanvas-lg .dropdown-menu{border:0!important;box-shadow:none!important;padding:.1rem 0 .4rem .9rem;margin:0;background:transparent}
  .offcanvas-lg .dropdown-item{padding:.55rem .7rem;border-radius:8px;font-size:.9rem}
  .offcanvas-lg .btn-nav{margin-top:.7rem;justify-content:center;border-radius:10px;padding:.7rem!important}
  /* topbar ringkas di HP */
  .topbar{font-size:.72rem}
  .topbar .container{justify-content:center;gap:.4rem .9rem}
  .topbar .topbar-info{display:none!important}
  .topbar-main{padding:.15rem .55rem!important}
}
@media(max-width:359.98px){
  .navbar .navbar-brand .brand-text small{display:none}
}
/* di ≥992px: offcanvas jadi navbar normal — sembunyikan header & reset body */
@media(min-width:992px){
  #mainNav .offcanvas-header{display:none}
  #mainNav.offcanvas-lg{padding:0;overflow:visible}
  #mainNav .offcanvas-body{padding:0;overflow:visible}
}

/* ---------- Hero slider ---------- */
.hero-slider .carousel-item{height:clamp(360px,56vh,620px)}
.hero-slider .carousel-item img{height:100%;width:100%;object-fit:cover}
.hero-slider .carousel-item::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(15,37,64,.82),rgba(53,120,128,.45))}
.hero-slider .carousel-caption{z-index:3;text-align:left;left:8%;right:8%;bottom:auto;top:50%;transform:translateY(-50%);max-width:760px}
.hero-slider .carousel-caption h1{font-weight:800;font-size:clamp(1.7rem,4vw,3.2rem);text-shadow:0 4px 20px rgba(0,0,0,.4);margin-bottom:.6rem}
.hero-slider .carousel-caption p{font-size:clamp(1rem,1.6vw,1.4rem);opacity:.95;margin-bottom:1.4rem}
.hero-fallback{height:clamp(360px,52vh,560px);background:linear-gradient(120deg,var(--primary-dark),var(--secondary));display:flex;align-items:center;color:#fff;position:relative;overflow:hidden}
.hero-fallback::before{content:"";position:absolute;right:-80px;top:-80px;width:380px;height:380px;border-radius:50%;background:rgba(75,168,142,.25)}
.hero-fallback::after{content:"";position:absolute;left:-60px;bottom:-90px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.06)}

/* ---------- Section heads ---------- */
.section{padding:4.5rem 0}
.section-title{font-weight:800;color:var(--dark);position:relative;display:inline-block;margin-bottom:.4rem}
.section-eyebrow{color:var(--accent);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem}
.section-head{margin-bottom:2.5rem}
.divider-accent{width:70px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--primary),var(--accent));margin:.6rem 0}

/* ---------- Cards ---------- */
.card{border:0;border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:.3s}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.quick-card{position:relative;overflow:hidden}
.quick-card .icon-wrap{width:68px;height:68px;border-radius:18px;display:grid;place-items:center;margin:0 auto 1rem;font-size:1.6rem;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary))}
.quick-card.c-warning .icon-wrap{background:linear-gradient(135deg,#e0892a,#f3b34d)}
.quick-card.c-info .icon-wrap{background:linear-gradient(135deg,var(--secondary),var(--accent))}
.quick-card.c-success .icon-wrap{background:linear-gradient(135deg,var(--accent),#6cc6a8)}

/* stat */
.stat-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.stat-card .stat-ico{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;font-size:1.5rem;color:#fff;background:linear-gradient(135deg,var(--primary),var(--secondary));margin:0 auto 1rem}
.stat-card h2{color:var(--primary);font-weight:800}

/* ---------- Page header (inner pages) ---------- */
.page-header{background:linear-gradient(120deg,var(--primary-dark),var(--secondary));color:#fff;padding:3.5rem 0 3rem;position:relative;overflow:hidden}
.page-header::after{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;background:rgba(75,168,142,.2)}
.page-header h1{font-weight:800;font-size:clamp(1.4rem,4.5vw,2.2rem)}
.breadcrumb-bar{background:var(--light);border-bottom:1px solid #e8eef4}
@media(max-width:575px){
  .page-header{padding:2rem 0 1.6rem}
  .hero-fallback{height:auto;min-height:auto;padding:2.4rem 0}
  .hero-fallback .lead{font-size:.98rem}
  .hero-fallback .btn-lg{width:100%}
  .hero-slider .carousel-item{height:clamp(240px,42vh,360px)}
  .section{padding:2.4rem 0}
  .section-title{font-size:1.35rem}
}
.breadcrumb-bar .breadcrumb{margin:0;padding:.85rem 0;font-size:.88rem}
.breadcrumb-item a{color:var(--secondary)}
.breadcrumb-item.active{color:var(--muted)}

/* ---------- Doc / list items ---------- */
.doc-item{display:flex;align-items:center;gap:1rem;background:#fff;border-radius:14px;padding:1rem 1.2rem;box-shadow:var(--shadow-sm);transition:.25s;border:1px solid #eef2f6}
.doc-item:hover{transform:translateX(4px);box-shadow:var(--shadow)}
.doc-item .doc-ico{width:50px;height:50px;border-radius:12px;display:grid;place-items:center;background:var(--light);color:var(--primary);font-size:1.3rem;flex:0 0 auto}
.chip{display:inline-block;padding:.25rem .7rem;border-radius:30px;background:var(--light);color:var(--secondary);font-size:.75rem;font-weight:700}

/* progress */
.progress{border-radius:30px;background:#e9eef3;overflow:hidden}
.progress-bar{background:linear-gradient(90deg,var(--accent),var(--secondary))}
.progress-bar.bg-danger{background:linear-gradient(90deg,#e25555,#f08a8a)!important}

/* ---------- Embeds ---------- */
.embed-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;height:100%}
.video-embed{position:relative;padding-bottom:56.25%;height:0;border-radius:14px;overflow:hidden}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ig-frame{width:100%;min-height:480px;border:0;border-radius:14px;background:var(--light)}

/* ---------- Forms ---------- */
.form-control,.form-select{border-radius:10px;border:1px solid #dde5ec;padding:.65rem .9rem}
.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 .2rem var(--ring)}
.form-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--dark);color:#c2cdd9}
footer.site-footer h5{color:#fff;font-weight:700;margin-bottom:1.1rem}
footer.site-footer a{color:#c2cdd9}footer.site-footer a:hover{color:var(--accent)}
footer.site-footer .soc{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:.25s}
footer.site-footer .soc:hover{background:var(--accent);transform:translateY(-3px)}
.footer-bottom{background:var(--primary-dark);color:#9fb3c9;font-size:.85rem}
/* Visitor bar */
.visitor-bar{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.1);margin-top:6px;padding:18px 0 2px}
.vb-item{display:flex;align-items:center;gap:9px;color:#c2cdd9}
.vb-ic{width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:var(--accent);font-size:.95rem}
.vb-val{font-weight:800;color:#fff;font-size:1.1rem;font-variant-numeric:tabular-nums}
.vb-lbl{font-size:.8rem;opacity:.72}
.vb-sep{width:1px;height:30px;background:rgba(255,255,255,.12)}
.vb-online{width:10px;height:10px;border-radius:50%;background:#43d17a;box-shadow:0 0 0 0 rgba(67,209,122,.6);animation:vbpulse 1.6s infinite}
@keyframes vbpulse{0%{box-shadow:0 0 0 0 rgba(67,209,122,.6)}100%{box-shadow:0 0 0 11px rgba(67,209,122,0)}}
@media(max-width:575px){.vb-sep{display:none}.visitor-bar{gap:14px}}

/* ---------- Logos strip ---------- */
.logo-strip img{height:48px;filter:grayscale(1);opacity:.6;transition:.3s}
.logo-strip a:hover img{filter:none;opacity:1}

/* ================= ADMIN ================= */
.admin-body{background:#eef2f7}
.admin-sidebar{position:fixed;top:0;left:0;bottom:0;width:265px;background:linear-gradient(180deg,var(--primary-dark),#11385c);color:#cdddec;overflow-y:auto;z-index:1040;transition:.3s}
.admin-sidebar .brand{padding:1.3rem 1.4rem;display:flex;gap:.7rem;align-items:center;font-weight:800;color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.admin-sidebar .brand .brand-logo{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--accent),var(--secondary));display:grid;place-items:center}
.admin-sidebar .nav-section{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#6f8aa6;padding:1.1rem 1.4rem .4rem}
.admin-sidebar a.snav{display:flex;align-items:center;gap:.8rem;padding:.7rem 1.4rem;color:#cdddec;font-weight:500;font-size:.9rem;border-left:3px solid transparent}
.admin-sidebar a.snav i{width:20px;text-align:center}
.admin-sidebar a.snav:hover{background:rgba(255,255,255,.06);color:#fff}
.admin-sidebar a.snav.active{background:rgba(75,168,142,.18);color:#fff;border-left-color:var(--accent)}
.admin-main{margin-left:265px;min-height:100vh;transition:.3s}
.admin-topbar{background:#fff;box-shadow:var(--shadow-sm);padding:.8rem 1.5rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:1030}
.admin-content{padding:1.8rem 1.5rem}
.stat-tile{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.4rem;display:flex;align-items:center;gap:1rem}
.stat-tile .t-ico{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;color:#fff;font-size:1.4rem}
.stat-tile h3{margin:0;font-weight:800;color:var(--dark)}
.admin-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);border:0}
.admin-card .card-header{background:#fff;border-bottom:1px solid #eef2f6;font-weight:700;color:var(--dark);border-radius:var(--radius) var(--radius) 0 0!important;padding:1.1rem 1.3rem}
.table thead th{background:var(--light);color:var(--muted);text-transform:uppercase;font-size:.74rem;letter-spacing:.04em;border:0}
.table td{vertical-align:middle}
.badge-status{padding:.35rem .7rem;border-radius:30px;font-weight:600;font-size:.72rem}
.s-pending{background:#fff4e0;color:#b9791b}.s-diproses{background:#e1eefb;color:#2563a8}
.s-diterima,.s-selesai{background:#e3f6ee;color:#2c8a66}.s-ditolak{background:#fde6e6;color:#c23a3a}
.login-wrap{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary-dark),var(--secondary));padding:1.5rem}
.login-card{background:#fff;border-radius:22px;box-shadow:0 30px 60px -20px rgba(0,0,0,.4);width:100%;max-width:420px;padding:2.5rem}
/* Admin tables responsive */
.admin-card .table-responsive{ -webkit-overflow-scrolling:touch }
.admin-card .table{margin-bottom:0}
.admin-card .table td,.admin-card .table th{white-space:nowrap}
.admin-card .table td:first-child,.admin-card .table th:first-child{white-space:normal;min-width:160px}
@media(max-width:991px){
  .admin-sidebar{transform:translateX(-100%)}
  .admin-sidebar.show{transform:translateX(0)}
  .admin-main{margin-left:0}
  .admin-content{padding:1rem .8rem}
  .admin-topbar{padding:.7rem 1rem}
  .stat-tile{padding:1rem}
  .stat-tile .t-ico{width:46px;height:46px;font-size:1.15rem}
  .admin-card .table{font-size:.86rem}
}
/* overlay saat sidebar terbuka di mobile */
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(15,37,64,.45);z-index:1035}
.sidebar-backdrop.show{display:block}
@media(min-width:992px){.sidebar-backdrop{display:none!important}}

/* AOS-free fade (in case AOS missing) */
[data-aos]{opacity:1}

/* ================= INTERACTION POLISH ================= */
@media(prefers-reduced-motion:no-preference){
  /* entrance halus untuk kartu & section */
  @keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
  @keyframes popIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
  .reveal{animation:fadeUp .6s both}
}
/* tombol: micro-interaction */
.btn{position:relative;overflow:hidden}
.btn:active{transform:scale(.96)}
.btn::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.25);opacity:0;transition:opacity .3s}
.btn:hover::after{opacity:1}
.btn-outline-primary:hover,.btn-outline-light:hover{transform:translateY(-2px)}
/* link nav underline tumbuh */
.navbar .nav-link::after{content:"";display:block;height:2px;width:0;background:var(--accent);transition:width .25s;border-radius:2px;margin-top:2px}
.navbar .nav-link:hover::after,.navbar .nav-link.active::after{width:60%}
.navbar .btn-nav::after{display:none}
/* judul section: garis tumbuh saat hover */
.section-title{transition:color .25s}
/* gambar kartu: zoom halus */
.card .overflow-hidden img,.card img{transition:transform .5s ease}
.card:hover img{transform:scale(1.05)}
/* chip & badge hover */
.chip{transition:.2s}.doc-item:hover .doc-ico{background:var(--primary);color:#fff;transition:.25s}
/* quick-card ikon berputar halus saat hover */
.quick-card .icon-wrap{transition:transform .4s}
.quick-card:hover .icon-wrap{transform:rotate(-6deg) scale(1.08)}
/* stat ikon mengambang */
.stat-card:hover .stat-ico,.stat-tile:hover .t-ico{animation:popIn .4s}
/* progress bar shimmer */
.progress-bar{position:relative;overflow:hidden}
.progress-bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-100%);animation:shimmer 2.2s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
/* heading hero fade */
.page-header h1{animation:fadeUp .6s both}
.page-header p{animation:fadeUp .8s both}
/* embed cards & list naik saat hover */
.embed-card{transition:transform .3s,box-shadow .3s}
.embed-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
/* smooth anchor focus */
a,button{transition:color .2s,background .2s,transform .2s,box-shadow .2s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}