/* =========================================================
   KRP Absensi — modern mobile UI layer (dimuat setelah app.css)
   ========================================================= */
:root{
  --m-navy:#0A2542; --m-navy-2:#123B66; --m-gold:#E7B54C; --m-gold-2:#C9922C;
  --m-ink:#0B203A; --m-mut:#7086A0; --m-line:#E7EFF8; --m-bg:#F1F6FC;
  --m-shadow:0 10px 28px rgba(12,38,68,.07); --m-shadow-sm:0 6px 16px rgba(12,38,68,.05);
}
html,body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
body{background:#EAF1F9;color:var(--m-ink);-webkit-font-smoothing:antialiased}
.app-device{background:var(--m-bg)}
.view{background:
  radial-gradient(130% 70% at 100% 0%,#E4EEFA 0%,rgba(228,238,250,0) 55%),
  radial-gradient(120% 60% at 0% 100%,#EDF3FB 0%,rgba(237,243,251,0) 60%),
  var(--m-bg);
  padding-bottom:104px}
.app-statusbar{background:linear-gradient(90deg,#08203A,#0C2B4C);letter-spacing:.4px}

/* ---------------- HERO ---------------- */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(155deg,#164A7C 0%,#0B2A4B 48%,#071B31 100%);
  padding:calc(14px + env(safe-area-inset-top)) 16px 56px;
  border-radius:0 0 30px 30px;
}
.hero::before{content:'';position:absolute;right:-70px;top:-90px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(231,181,76,.34),rgba(231,181,76,0));pointer-events:none}
.hero::after{content:'';position:absolute;left:-60px;bottom:-90px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(76,148,224,.22),rgba(76,148,224,0));pointer-events:none}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;z-index:2}
.hero-brand{display:flex;align-items:center;gap:10px;min-width:0}
.hero-brand img{width:38px;height:42px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.28));flex:none}
.hero-brand b{display:block;font-size:10px;letter-spacing:1.5px;font-weight:800;color:#fff;line-height:1.2}
.hero-brand small{display:block;font-size:8.4px;letter-spacing:.4px;color:rgba(255,255,255,.6);margin-top:3px;font-weight:600}
.hero-bell{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:none;position:relative;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);color:#fff;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hero-bell:active{transform:scale(.95)}
.hero-bell .ic{width:19px;height:19px}
.hero-bell .dot-badge{top:8px;right:8px;border-color:#0C2B4C}

.hero-user{display:flex;align-items:center;gap:12px;margin-top:18px;position:relative;z-index:2}
.avatar-ring{width:60px;height:60px;flex:none;border-radius:20px;padding:2.5px;
  background:conic-gradient(from 200deg,#F6D488,#C9922C,#F6D488,#8A6516,#F6D488);
  box-shadow:0 8px 18px rgba(0,0,0,.25)}
.avatar-ring img{width:100%;height:100%;border-radius:17px;object-fit:cover;display:block;background:#12304F;border:2px solid #0B2A4B}
.hu-txt{flex:1;min-width:0}
.hu-txt .eyebrow-lite{display:block;font-size:10px;font-weight:600;color:rgba(255,255,255,.62);letter-spacing:.2px}
.hu-txt h1{margin:2px 0 6px;font-size:21px;line-height:1.12;letter-spacing:-.5px;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hu-meta{display:flex;gap:6px;flex-wrap:wrap}
.hu-meta span{font-size:9.4px;font-weight:700;letter-spacing:.3px;color:#DCE9F8;padding:3.5px 8px;border-radius:8px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13)}
.live-pill{display:inline-flex;align-items:center;gap:5px;font-size:9.4px;font-weight:800;letter-spacing:.4px;
  color:#C9F6D9;background:rgba(32,197,94,.16);border:1px solid rgba(83,222,132,.35);
  padding:5px 9px;border-radius:999px;flex:none;align-self:flex-start;margin-top:2px}
.live-pill i{width:6px;height:6px;border-radius:50%;background:#57E28C;box-shadow:0 0 0 3px rgba(87,226,140,.18);animation:mPulse 2s infinite}
@keyframes mPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.85)}}

.hero-shift{margin-top:18px;display:flex;align-items:center;gap:11px;position:relative;z-index:2;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.17);border-radius:20px;padding:12px 13px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 30px rgba(3,14,28,.24)}
.hs-ic{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:none;color:#2A1D02;
  background:linear-gradient(150deg,#F7D68D,#DCA83C);box-shadow:0 6px 14px rgba(0,0,0,.2)}
.hs-ic .ic{width:20px;height:20px}
.hs-main{flex:1;min-width:0}
.hs-main .k{display:block;font-size:8.4px;letter-spacing:1.2px;font-weight:800;color:rgba(255,255,255,.6);text-transform:uppercase}
.hs-main b{display:block;font-size:14.5px;font-weight:800;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-main small{display:block;font-size:10.6px;color:rgba(255,255,255,.72);font-weight:600;margin-top:2px}
.hs-right{text-align:right;flex:none}
.hs-right b{display:block;font-size:11.4px;font-weight:800}
.hs-right small{display:block;font-size:9.6px;color:rgba(255,255,255,.62);margin-top:1px}
.chip-status{display:inline-flex;align-items:center;gap:4px;margin-top:5px;font-size:9px;font-weight:800;
  padding:3.5px 8px;border-radius:999px;letter-spacing:.3px}
.chip-status.green{background:rgba(60,221,131,.16);color:#A8F5C6;border:1px solid rgba(96,230,150,.34)}
.chip-status.gold{background:rgba(247,196,76,.16);color:#FFE0A3;border:1px solid rgba(247,196,76,.34)}
.chip-status.red{background:rgba(255,120,120,.16);color:#FFC9C9;border:1px solid rgba(255,120,120,.34)}
.chip-status.blue{background:rgba(120,180,255,.16);color:#CFE5FF;border:1px solid rgba(120,180,255,.34)}

/* ---------------- BODY ---------------- */
.home-body{margin-top:-40px;padding:0 14px 24px;position:relative;z-index:3}
.act-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn-act{height:50px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:12.4px;font-weight:800;letter-spacing:.1px;border:none;transition:transform .15s,box-shadow .15s}
.btn-act .ic{width:17px;height:17px;stroke-width:2.1}
.btn-act.in{background:linear-gradient(155deg,#17497B,#0A2542);color:#fff;box-shadow:0 10px 22px rgba(10,37,66,.28)}
.btn-act.out{background:linear-gradient(155deg,#F7D68D,#D9A63C);color:#2A1D02;box-shadow:0 10px 22px rgba(199,146,44,.28)}
.btn-act:active{transform:scale(.976)}
.btn-act.off,.btn-act:disabled{background:#E7EEF7;color:#94A6BC;box-shadow:none;opacity:1}

.today-card{background:#fff;border:1px solid var(--m-line);border-radius:20px;padding:13px 6px 12px;margin-top:12px;
  box-shadow:var(--m-shadow);display:grid;grid-template-columns:1fr 1fr 1.25fr}
.today-card .tc{padding:0 11px;min-width:0}
.today-card .tc+.tc{border-left:1px solid #EDF3FA}
.today-card .k{display:flex;align-items:center;gap:4px;font-size:8.8px;font-weight:800;letter-spacing:.6px;color:#8CA0B8;text-transform:uppercase}
.today-card .k .ic{width:12px;height:12px}
.today-card b{display:block;font-size:15.5px;font-weight:800;margin-top:4px;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.today-card b.mut{color:#A9B7C8;font-weight:700}
.today-card small{display:block;font-size:9.2px;color:#8CA0B8;margin-top:2px;font-weight:600}
.pc-bar{height:5px;border-radius:99px;background:#EDF3FA;margin-top:7px;overflow:hidden}
.pc-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2E7BD6,#5FA8F5)}

.sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:20px 3px 10px}
.sec-head h3{margin:0;font-size:13px;font-weight:800;letter-spacing:-.2px;color:var(--m-ink)}
.sec-head a{font-size:10.6px;font-weight:700;color:#2C6FD1;display:inline-flex;align-items:center;gap:2px}
.sec-head a .ic{width:13px;height:13px}

.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0}
.tile{background:#fff;border:1px solid var(--m-line);border-radius:18px;padding:11px 3px 9px;
  display:flex;flex-direction:column;align-items:center;gap:7px;box-shadow:var(--m-shadow-sm);transition:transform .15s,box-shadow .15s}
.tile:active{transform:scale(.965)}
.tile .ti{width:44px;height:44px;border-radius:14px;display:grid;place-items:center}
.tile .ti .ic{width:21px;height:21px;stroke-width:2}
.tile span{font-size:9.8px;font-weight:700;color:#33465D;text-align:center;line-height:1.15;letter-spacing:-.1px}
.tile .ti.blue{background:linear-gradient(150deg,#E8F2FF,#D5E7FF);color:#1B63C4}
.tile .ti.green{background:linear-gradient(150deg,#E5F8EC,#CEF1DB);color:#12803D}
.tile .ti.gold{background:linear-gradient(150deg,#FDF3DC,#F8E4B8);color:#A8791F}
.tile .ti.red{background:linear-gradient(150deg,#FDECEC,#FAD7D7);color:#C03338}
.tile .ti.purple{background:linear-gradient(150deg,#F1EDFE,#E2D9FC);color:#6D5BD0}
.tile .ti.navy{background:linear-gradient(150deg,#E9F0F9,#D8E4F3);color:#173E6C}

.info-card{margin:16px 0 18px;background:#fff;border:1px solid var(--m-line);border-radius:20px;overflow:hidden;box-shadow:var(--m-shadow)}
.ic-head{display:flex;align-items:center;gap:9px;padding:13px 14px 9px}
.ic-head .ih{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:linear-gradient(150deg,#FDF3DC,#F7E3B6);color:#A8791F}
.ic-head .ih .ic{width:15px;height:15px}
.ic-head b{font-size:12.4px;font-weight:800;color:var(--m-ink);display:block;line-height:1.2}
.ic-head small{font-size:9.6px;color:#8CA0B8;font-weight:600}
.pg-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:2px 12px 12px}
.pg-item{background:#F7FAFE;border:1px solid #ECF3FB;border-radius:14px;padding:9px 10px;min-width:0}
.pg-item .k{display:flex;align-items:center;gap:4px;font-size:8.8px;font-weight:800;letter-spacing:.4px;color:#8CA0B8;text-transform:uppercase}
.pg-item .k .ic{width:11px;height:11px}
.pg-item b{display:block;font-size:11.4px;font-weight:800;margin-top:3px;color:#1B2E45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info-links{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:0 12px 12px}
.info-links a{display:flex;align-items:center;justify-content:center;gap:5px;font-size:9.8px;font-weight:700;
  color:#2C6FD1;background:#F1F7FF;border:1px solid #E2EDFB;border-radius:12px;padding:9px 4px}
.info-links a:active{background:#E6F0FD}
.info-links .ic{width:13px;height:13px}

/* ---------------- TABBAR ---------------- */
.tabbar{background:rgba(255,255,255,.93);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid rgba(11,32,58,.07);box-shadow:0 -10px 28px rgba(11,32,58,.07);
  padding:8px 6px calc(9px + env(safe-area-inset-bottom))}
.tabbar a{font-size:8.8px;font-weight:700;letter-spacing:.1px;color:#8B9CAF;gap:3px;padding:2px 0;z-index:0}
.tabbar a .ic{width:20px;height:20px;stroke-width:1.9}
.tabbar a.on{color:#0A2542}
.tabbar a.on::before{content:'';position:absolute;left:50%;top:-1px;transform:translateX(-50%);
  width:40px;height:32px;border-radius:11px;background:#EAF2FD;z-index:-1}
.tab-center{margin-top:-24px}
.tab-center .center-btn{width:56px;height:56px;background:linear-gradient(150deg,#F7D68D,#D6A23A);color:#2A1D02;
  box-shadow:0 12px 24px rgba(214,164,58,.38),0 0 0 4px #fff,0 0 0 5.5px rgba(10,37,66,.10)}
.tab-center.on .center-btn{background:linear-gradient(150deg,#17497B,#0A2542);color:#fff;
  box-shadow:0 12px 24px rgba(10,37,66,.34),0 0 0 4px #fff,0 0 0 5.5px rgba(214,164,58,.5)}
.tab-center .center-btn .ic{width:24px;height:24px}
.tab-center>span:last-child{margin-top:2px;font-size:8.6px}

/* ---------------- SHARED PAGE POLISH ---------------- */
.ph{border-radius:0 0 26px 26px;padding:calc(14px + env(safe-area-inset-top)) 16px 20px;
  background:linear-gradient(155deg,#164A7C,#0A2542 62%,#071B31)}
.ph-title{font-size:16.6px;letter-spacing:-.3px}
.ph-sub{font-size:10.8px;color:rgba(255,255,255,.68)}
.ph-back{width:38px;height:38px;border-radius:13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.17)}
.ph-back:active{transform:scale(.94)}
.card{border-radius:19px;border-color:var(--m-line);box-shadow:var(--m-shadow)}
.row-card{border-radius:16px;border-color:var(--m-line);box-shadow:var(--m-shadow-sm);padding:13px 14px}
.row-card:active{transform:scale(.992)}
.list{display:flex;flex-direction:column;gap:9px;padding:0 14px}
.chips{display:flex;gap:7px;overflow-x:auto;padding:0 14px 2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{border-radius:999px;padding:8px 14px;font-size:11px;font-weight:700;white-space:nowrap;
  background:#fff;border:1px solid var(--m-line);color:#5E738C;box-shadow:var(--m-shadow-sm)}
.chip.on{background:linear-gradient(150deg,#17497B,#0A2542);color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(10,37,66,.22)}
.st h3{font-size:13px}
.badge{font-size:9.8px;padding:4.5px 9px}
.profile-top{background:linear-gradient(160deg,#164A7C,#0A2542 70%,#071B31);color:#fff;padding:26px 16px 30px;
  border-radius:0 0 28px 28px;text-align:center;position:relative;overflow:hidden}
.profile-top::after{content:'';position:absolute;right:-70px;top:-70px;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(231,181,76,.28),transparent)}
.profile-av{width:88px;height:88px;border-radius:26px;object-fit:cover;border:2.5px solid rgba(247,214,141,.9);
  box-shadow:0 14px 30px rgba(0,0,0,.28);position:relative;z-index:1}
.profile-top h2{font-size:19px;margin:12px 0 3px;letter-spacing:-.4px;font-weight:800;position:relative;z-index:1}
.profile-top p{font-size:11px;color:rgba(255,255,255,.7);margin:0 0 10px;position:relative;z-index:1}
.profile-top .badge{background:rgba(255,255,255,.12);color:#EAF3FF;border:1px solid rgba(255,255,255,.2);position:relative;z-index:1}
.profile-card{background:#fff;border:1px solid var(--m-line);border-radius:20px;margin:14px;overflow:hidden;box-shadow:var(--m-shadow)}
.rekap{margin:14px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.rik{border-radius:16px;padding:12px 8px;text-align:center;border:1px solid #ECF3FB;background:#fff;box-shadow:var(--m-shadow-sm)}
.rik b{font-size:20px;letter-spacing:-.5px}
.rik small{font-size:9.4px;font-weight:700}
.prof-actions{margin:0 14px}

/* ---------------- RESPONSIVE ---------------- */
@media (min-width:560px){
  .hero{padding-left:22px;padding-right:22px;border-radius:0 0 32px 32px}
  .home-body{padding:0 20px 26px}
  .menu-grid{gap:10px}
  .tile{padding:14px 6px 12px}
  .tile span{font-size:10.6px}
  .tabbar{max-width:none}
}
@media (max-width:370px){
  .hero{padding-left:13px;padding-right:13px}
  .hero-brand b{font-size:9.2px;letter-spacing:1.1px}
  .hero-brand small{font-size:7.6px}
  .hu-txt h1{font-size:18.5px}
  .avatar-ring{width:54px;height:54px;border-radius:18px}
  .avatar-ring img{border-radius:15px}
  .hs-main b{font-size:13.2px}
  .today-card b{font-size:14px}
  .menu-grid{gap:6px}
  .tile .ti{width:40px;height:40px;border-radius:13px}
  .tile span{font-size:9px}
  .info-links a{font-size:9px;gap:3px}
  .tabbar a{font-size:8.2px}
  .tab-center .center-btn{width:52px;height:52px}
}
@media (max-height:700px){
  .hero{padding-bottom:46px}
  .home-body{margin-top:-34px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------------- RIWAYAT / AKTIVITAS CARD ---------------- */
.rw{display:block!important;padding:12px 13px 11px}
.rw-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rw-date b{display:block;font-size:12.6px;font-weight:800;color:#16293F;letter-spacing:-.2px}
.rw-date small{display:block;font-size:9.8px;color:#8CA0B8;font-weight:600;margin-top:3px}
.rw-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:10px;
  background:#F7FAFE;border:1px solid #EDF3FB;border-radius:13px;padding:8px 4px}
.rw-grid>div{padding:0 8px;min-width:0}
.rw-grid>div+div{border-left:1px solid #E6EFF9}
.rw-grid .k{display:flex;align-items:center;gap:3px;font-size:8.4px;font-weight:800;letter-spacing:.5px;color:#94A7BD;text-transform:uppercase}
.rw-grid .k .ic{width:10px;height:10px}
.rw-grid b{display:block;font-size:12.2px;font-weight:800;margin-top:2px;color:#1B2E45;font-variant-numeric:tabular-nums}
.btn-act.done{background:#F0F8F3;color:#2E7A52;border:1px solid #D7EDDE;box-shadow:none}
.btn-act.done .ic{stroke-width:2.4}
.home-foot{display:flex;align-items:center;justify-content:center;gap:5px;margin:16px 0 4px;
  font-size:9.2px;font-weight:600;color:#93A6BB;text-align:center;line-height:1.45}
.home-foot .ic{width:12px;height:12px;flex:none;opacity:.8}
.tabbar.hidden{display:none!important}

.view.no-tab{padding-bottom:0;display:flex;flex-direction:column}
.view.no-tab>.cam-page{flex:1;display:flex;flex-direction:column;min-height:100%}
.view.no-tab .cam-stage{flex:1}

/* ---------------- EMPTY STATE ---------------- */
.empty{margin:14px;padding:30px 20px;border-radius:20px;background:linear-gradient(180deg,#fff,#FBFDFF);
  border:1px solid var(--m-line);box-shadow:var(--m-shadow-sm);text-align:center;color:#8497AC;
  font-size:11.6px;font-weight:600;line-height:1.65}
.empty .ic{width:46px;height:46px;padding:12px;box-sizing:border-box;border-radius:15px;
  background:#F0F6FD;border:1px solid #E3EEFA;color:#7FA3CC;margin-bottom:10px}

/* =====================================================================
   LAYOUT MOBILE: kunci tinggi layar supaya bottom nav tidak ikut ter-scroll
   (fallback untuk browser/WebView yang tidak mendukung 100dvh)
   ===================================================================== */
@media (max-width:900px){
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  body{position:relative}
  .app-shell{display:block;height:100%;min-height:0;padding:0;max-width:none;overflow:hidden}
  .app-device{position:fixed;inset:0;width:100%;height:auto;max-height:none;min-height:0;
    border-radius:0;box-shadow:none;overflow:hidden;display:flex;flex-direction:column}
  .view{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .tabbar{position:relative;flex:0 0 auto;z-index:60;
    padding-bottom:calc(9px + env(safe-area-inset-bottom))}
  .tabbar.hidden{display:none!important}
}

/* Login di layar pendek: layar auth ikut bisa di-scroll sendiri */
@media (max-width:900px){
  .auth{position:fixed;inset:0;display:block;height:auto;min-height:0;overflow-y:auto;
    -webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:#F7FAFE}
  .auth .auth-form-wrap{min-height:0!important;padding-bottom:34px;
    background:linear-gradient(170deg,#0B203A 0%,#123055 34%,#F7FAFE 34.2%,#F7FAFE 100%)}
}

/* Tablet: jaga proporsi aplikasi mobile, jangan melar selebar layar */
@media (min-width:601px) and (max-width:900px){
  body{background:#E6EEF7}
  .app-device{width:min(100%,448px);margin:0 auto;border-radius:0;
    box-shadow:0 0 0 1px rgba(11,32,58,.06),0 30px 70px rgba(9,28,50,.20)}
  .hero{padding-left:18px;padding-right:18px}
}