:root{--tabsis-safe-top:env(safe-area-inset-top,0px);--tabsis-safe-right:env(safe-area-inset-right,0px);--tabsis-safe-bottom:env(safe-area-inset-bottom,0px);--tabsis-safe-left:env(safe-area-inset-left,0px);--pwa-green:#1b5e20;--pwa-green-2:#2e7d32;--pwa-soft:#eef8f0;--pwa-text:#23412b}
html,body{-webkit-text-size-adjust:100%}.tabsis-pwa-standalone body{padding-top:var(--tabsis-safe-top);padding-left:var(--tabsis-safe-left);padding-right:var(--tabsis-safe-right)}
[data-pwa-install]{cursor:pointer}.tabsis-pwa-installed-note{display:none}.tabsis-pwa-standalone .tabsis-pwa-installed-note{display:block}.tabsis-pwa-standalone [data-pwa-install-container],.tabsis-pwa-standalone [data-pwa-install]{display:none!important}
.tabsis-login-install{margin-top:18px;padding-top:17px;border-top:1px solid #dce9df;text-align:center}.tabsis-login-install .tabsis-install-main{display:flex!important;align-items:center;justify-content:center;gap:9px;width:100%;min-height:48px;border-radius:14px;border:1px solid #b8d8c0;background:#fff;color:#1d6b35;font-weight:800;box-shadow:0 6px 18px rgba(31,100,50,.08)}.tabsis-login-install .tabsis-install-main:hover,.tabsis-login-install .tabsis-install-main:focus{background:#f3fbf5;color:#145a2b}.tabsis-login-install small{display:block;margin-top:9px;color:#66776b;line-height:1.5}.tabsis-login-install .tabsis-guide-link{display:inline-block;margin-top:7px;font-size:12px;font-weight:700;color:#2d7040}
.tabsis-navbar-install>a{display:flex!important;align-items:center;gap:6px}.tabsis-navbar-install i{font-size:16px}.tabsis-navbar-install .pwa-nav-label{font-size:12px;font-weight:700}
.tabsis-student-install-card{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 16px;padding:15px 18px;border:1px solid #cfe5d5;border-radius:16px;background:linear-gradient(135deg,#f4fbf6,#eaf7ee);box-shadow:0 6px 20px rgba(24,94,45,.06)}.tabsis-student-install-card .pwa-install-copy{display:flex;align-items:center;gap:12px;min-width:0}.tabsis-student-install-card .pwa-install-icon{flex:0 0 42px;width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#1b5e20;color:#fff;font-size:20px}.tabsis-student-install-card strong,.tabsis-student-install-card span{display:block}.tabsis-student-install-card strong{font-size:13px;color:#1e4429}.tabsis-student-install-card span{margin-top:3px;color:#68806f;font-size:11px;line-height:1.4}.tabsis-student-install-card .btn{border-radius:10px;font-weight:700;white-space:nowrap}
.tabsis-pwa-toast{position:fixed;z-index:100000;left:50%;bottom:calc(22px + var(--tabsis-safe-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:calc(100vw - 28px);padding:11px 14px;border-radius:14px;color:#fff;font-weight:700;font-size:12px;box-shadow:0 14px 35px rgba(0,0,0,.24)}.tabsis-pwa-toast.is-info{background:#355e45}.tabsis-pwa-toast.is-offline{background:#9b3a2f}.tabsis-pwa-toast.is-online{background:#1b7c3a}.tabsis-pwa-toast.is-update{background:#245b80}.tabsis-pwa-toast button{border:0;border-radius:8px;padding:6px 10px;background:#fff;color:#214d32;font-weight:800}
.tabsis-pwa-modal{position:fixed;z-index:100001;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(11,32,18,.62);backdrop-filter:blur(4px)}.tabsis-pwa-modal-card{position:relative;width:100%;max-width:480px;max-height:90vh;overflow:auto;padding:28px 25px;border-radius:22px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.3);color:#294133}.tabsis-pwa-modal-card h3{margin:10px 0 15px;font-size:20px;font-weight:800;color:#1d542d}.tabsis-pwa-modal-card ol{padding-left:21px;margin-bottom:18px}.tabsis-pwa-modal-card li{margin:0 0 10px;line-height:1.55}.tabsis-pwa-modal-close{position:absolute;right:14px;top:12px;width:36px;height:36px;border:0;border-radius:50%;background:#eef4ef;color:#52665a;font-size:25px;line-height:34px}.tabsis-pwa-modal-icon{width:48px;height:48px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:#e8f6ec;color:#1b6a34;font-size:25px}.tabsis-pwa-modal-security{display:flex;gap:9px;margin:17px 0;padding:12px;border-radius:12px;background:#f3f8f4;color:#577061;font-size:11px;line-height:1.5}.tabsis-pwa-modal-security i{margin-top:2px;color:#1b6a34}
.tabsis-pwa-standalone .tabsis-student-bottom-nav{padding-bottom:var(--tabsis-safe-bottom)!important;height:calc(66px + var(--tabsis-safe-bottom))!important}.tabsis-pwa-standalone .main-footer{padding-bottom:calc(15px + var(--tabsis-safe-bottom))}
/* Mobile comfort: touch target, safe areas, no accidental iOS zoom, readable controls */
@media(max-width:767px){body.login-page{padding-top:calc(16px + var(--tabsis-safe-top))!important;padding-right:calc(12px + var(--tabsis-safe-right))!important;padding-bottom:calc(16px + var(--tabsis-safe-bottom))!important;padding-left:calc(12px + var(--tabsis-safe-left))!important;align-items:flex-start!important}.login-box{margin-top:8px!important;margin-bottom:8px!important}.login-box-body{padding:24px 17px 20px!important}.login-logo{margin-bottom:12px!important}.login-logo img{width:92px!important;margin-bottom:8px!important}.login-logo a{font-size:22px!important}.login-subtitle{font-size:12px!important}.form-control,select.form-control,input,textarea{font-size:16px!important}.btn,.tabsis-pwa-modal-card .btn{min-height:44px}.content-wrapper{padding-bottom:calc(78px + var(--tabsis-safe-bottom));overflow-x:hidden}.content{padding:12px!important}.content-header{padding-left:14px!important;padding-right:14px!important}.main-header .navbar{padding-right:var(--tabsis-safe-right)}.tabsis-navbar-install .pwa-nav-label{display:none}.tabsis-student-install-card{align-items:flex-start;padding:13px 14px}.tabsis-student-install-card .pwa-install-icon{flex-basis:38px;width:38px;height:38px}.tabsis-student-install-card .btn{min-height:40px;padding:9px 10px}.tabsis-student-bottom-nav a{min-height:52px}.table-responsive{border:0;margin-bottom:0;-webkit-overflow-scrolling:touch}.box,.tabsis-panel,.student-portal-card{max-width:100%}.tabsis-pwa-toast{bottom:calc(80px + var(--tabsis-safe-bottom));white-space:normal;width:max-content;max-width:calc(100vw - 24px)}.tabsis-pwa-modal{align-items:flex-end;padding:0}.tabsis-pwa-modal-card{max-width:none;max-height:86vh;border-radius:22px 22px 0 0;padding:25px 19px calc(22px + var(--tabsis-safe-bottom))}.student-book-hero,.tabsis-student-hero{border-radius:16px!important}.student-qr-code{max-width:100%}}
@media(max-width:420px){.tabsis-student-install-card{display:block}.tabsis-student-install-card .pwa-install-copy{margin-bottom:10px}.tabsis-student-install-card .btn{width:100%}.tabsis-pwa-toast{font-size:11px}.login-box-body{border-radius:18px!important}}
@media print{[data-pwa-install-container],[data-pwa-install],.tabsis-navbar-install,.tabsis-pwa-toast,.tabsis-pwa-modal{display:none!important}}

/* =========================================================
   TABSIS PRO - Student mobile shell v2
   Sidebar menjadi overlay pada HP/tablet dan tidak pernah
   menyisakan margin gelap pada content ketika tertutup.
   ========================================================= */
.tabsis-sidebar-backdrop{display:none;border:0;padding:0;margin:0;background:transparent}
@media(max-width:1024px){
  body.tabsis-student-app{min-width:0!important}
  body.tabsis-student-app .wrapper{min-width:0!important;overflow-x:hidden!important}
  body.tabsis-student-app .main-header{max-height:100px!important}
  body.tabsis-student-app .main-header .logo{width:100%!important;float:none!important;margin:0!important;padding-left:12px!important;padding-right:12px!important}
  body.tabsis-student-app .main-header .navbar{width:100%!important;float:none!important;margin-left:0!important}
  body.tabsis-student-app .content-wrapper,
  body.tabsis-student-app .right-side,
  body.tabsis-student-app .main-footer,
  body.tabsis-student-app.sidebar-collapse .content-wrapper,
  body.tabsis-student-app.sidebar-open .content-wrapper,
  body.tabsis-student-app.sidebar-collapse .right-side,
  body.tabsis-student-app.sidebar-open .right-side,
  body.tabsis-student-app.sidebar-collapse .main-footer,
  body.tabsis-student-app.sidebar-open .main-footer{
    margin-left:0!important;
    margin-right:0!important;
    -webkit-transform:none!important;
    -ms-transform:none!important;
    transform:none!important;
    width:auto!important;
  }
  body.tabsis-student-app .content-wrapper{min-width:0!important;min-height:calc(100dvh - 100px)!important}
  body.tabsis-student-app .main-sidebar,
  body.tabsis-student-app.sidebar-collapse .main-sidebar{
    position:fixed!important;
    top:0!important;
    bottom:0!important;
    left:0!important;
    width:min(82vw,280px)!important;
    max-width:280px!important;
    height:100dvh!important;
    min-height:100dvh!important;
    padding-top:100px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    z-index:1051!important;
    box-shadow:8px 0 28px rgba(0,0,0,.18);
    opacity:0!important;
    pointer-events:none!important;
    -webkit-transform:translate3d(-118%,0,0)!important;
    transform:translate3d(-118%,0,0)!important;
    transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .20s ease!important;
    will-change:transform,opacity;
  }
  body.tabsis-student-app.sidebar-open .main-sidebar{
    opacity:1!important;
    pointer-events:auto!important;
    -webkit-transform:translate3d(0,0,0)!important;
    transform:translate3d(0,0,0)!important;
  }
  body.tabsis-student-app .tabsis-sidebar-backdrop{
    display:block!important;
    position:fixed;
    inset:100px 0 0 0;
    z-index:1050;
    width:100%;
    height:auto;
    background:rgba(10,28,17,.42);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .28s ease,visibility 0s linear .28s;
  }
  body.tabsis-student-app.sidebar-open .tabsis-sidebar-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .28s ease;
  }
  body.tabsis-student-app.sidebar-open{overflow:hidden!important}
  body.tabsis-student-app .main-header .navbar-custom-menu .navbar-nav{margin:0!important}
  body.tabsis-student-app .main-header .navbar-custom-menu .nav>li>a{
    min-width:44px;
    min-height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  body.tabsis-student-app .main-header .user-image{width:28px!important;height:28px!important;object-fit:cover;background:#fff}
}

@media(max-width:767px){
  body.tabsis-student-app .content-wrapper{padding-bottom:calc(80px + var(--tabsis-safe-bottom))!important}
  body.tabsis-student-app .content{width:100%!important;margin:0!important;padding:12px!important}
  body.tabsis-student-app .content-header{width:100%!important;margin:0!important;padding:16px 14px 6px!important}
  body.tabsis-student-app .content-header>h1{font-size:22px!important;line-height:1.22!important;margin:0!important;overflow-wrap:anywhere}
  body.tabsis-student-app .content-header>h1>small{display:block!important;padding-left:0!important;margin-top:5px!important;font-size:13px!important;line-height:1.35!important}
  body.tabsis-student-app .content-header>.breadcrumb{display:flex!important;align-items:center;gap:5px;flex-wrap:wrap;margin:10px 0 0!important;padding:0!important;background:transparent!important;line-height:1.4}
  body.tabsis-student-app .content-header>.breadcrumb>li{float:none!important}
  body.tabsis-student-app .tabsis-student-portal{width:100%!important;max-width:100%!important;padding-left:12px!important;padding-right:12px!important;box-sizing:border-box}
  body.tabsis-student-app .tabsis-student-portal.content{padding-top:10px!important}
  body.tabsis-student-app .tabsis-student-portal>.row{margin-left:-6px!important;margin-right:-6px!important}
  body.tabsis-student-app .tabsis-student-portal>.row>[class*="col-"]{padding-left:6px!important;padding-right:6px!important}
  body.tabsis-student-app .student-portal-summary{min-height:82px!important;padding:14px 15px!important;margin-bottom:12px!important}
  body.tabsis-student-app .student-portal-summary strong{font-size:18px!important;overflow-wrap:anywhere}
  body.tabsis-student-app .student-portal-card{border-radius:15px!important;margin-bottom:14px!important}
  body.tabsis-student-app .student-portal-card .box-body{overflow-x:visible}
  body.tabsis-student-app .tabsis-student-bottom-nav{height:calc(68px + var(--tabsis-safe-bottom))!important;padding-bottom:var(--tabsis-safe-bottom)!important}
  body.tabsis-student-app .tabsis-student-bottom-nav a{font-size:10px!important;touch-action:manipulation}
  body.tabsis-student-app .tabsis-student-bottom-nav a i{font-size:19px!important}
  body.tabsis-student-app .main-footer{padding-bottom:calc(82px + var(--tabsis-safe-bottom))!important}
}

@media(max-width:420px){
  body.tabsis-student-app .content{padding:10px!important}
  body.tabsis-student-app .content-header{padding:13px 12px 5px!important}
  body.tabsis-student-app .content-header>h1{font-size:20px!important}
  body.tabsis-student-app .tabsis-student-portal{padding-left:10px!important;padding-right:10px!important}
  body.tabsis-student-app .main-header .navbar .nav>li>a{padding-left:8px!important;padding-right:8px!important}
  body.tabsis-student-app .main-header .navbar-custom-menu .nav>li>a{min-width:42px}
}

/* Student drawer smooth hard-fix v4: no collapsed rail, tetap bisa slide. */
@media(max-width:1024px){
  body.tabsis-student-app .main-sidebar,
  body.tabsis-student-app.sidebar-collapse .main-sidebar,
  body.tabsis-student-app:not(.sidebar-open) .main-sidebar{
    display:block!important;visibility:visible!important;left:0!important;
    opacity:0!important;pointer-events:none!important;
    transform:translate3d(-118%,0,0)!important;-webkit-transform:translate3d(-118%,0,0)!important;
    transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .20s ease!important;
  }
  body.tabsis-student-app.sidebar-open .main-sidebar{
    opacity:1!important;pointer-events:auto!important;
    transform:translate3d(0,0,0)!important;-webkit-transform:translate3d(0,0,0)!important;
  }
  body.tabsis-student-app .content-wrapper,body.tabsis-student-app .right-side,body.tabsis-student-app .main-footer{margin-left:0!important;width:100%!important;max-width:100vw!important}
}

@media (prefers-reduced-motion:reduce){
  body.tabsis-student-app .main-sidebar,body.tabsis-student-app .tabsis-sidebar-backdrop{transition-duration:.01ms!important}
}

/* Admin + siswa: sidebar mobile/tablet menjadi drawer overlay tanpa rel 50px. */
@media(max-width:1024px){
  body.tabsis-mobile-shell{min-width:0!important}
  body.tabsis-mobile-shell .wrapper{min-width:0!important;overflow-x:hidden!important}
  body.tabsis-mobile-shell .main-header{max-height:100px!important}
  body.tabsis-mobile-shell .main-header .logo{width:100%!important;float:none!important;margin:0!important;padding-left:12px!important;padding-right:12px!important}
  body.tabsis-mobile-shell .main-header .navbar{width:100%!important;float:none!important;margin-left:0!important}
  body.tabsis-mobile-shell .content-wrapper,
  body.tabsis-mobile-shell .right-side,
  body.tabsis-mobile-shell .main-footer,
  body.tabsis-mobile-shell.sidebar-collapse .content-wrapper,
  body.tabsis-mobile-shell.sidebar-open .content-wrapper,
  body.tabsis-mobile-shell.sidebar-collapse .right-side,
  body.tabsis-mobile-shell.sidebar-open .right-side,
  body.tabsis-mobile-shell.sidebar-collapse .main-footer,
  body.tabsis-mobile-shell.sidebar-open .main-footer{
    margin-left:0!important;margin-right:0!important;width:100%!important;max-width:100vw!important;
    transform:none!important;-webkit-transform:none!important
  }
  body.tabsis-mobile-shell .content-wrapper{min-width:0!important}
  body.tabsis-mobile-shell .main-sidebar,
  body.tabsis-mobile-shell.sidebar-collapse .main-sidebar,
  body.tabsis-mobile-shell:not(.sidebar-open) .main-sidebar{
    display:block!important;visibility:visible!important;position:fixed!important;
    top:0!important;bottom:0!important;left:0!important;
    width:min(82vw,280px)!important;max-width:280px!important;
    height:100dvh!important;min-height:100dvh!important;padding-top:100px!important;
    overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;
    z-index:1051!important;box-shadow:8px 0 28px rgba(0,0,0,.22)!important;
    opacity:0!important;pointer-events:none!important;
    transform:translate3d(-118%,0,0)!important;-webkit-transform:translate3d(-118%,0,0)!important;
    transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .20s ease!important;
    will-change:transform,opacity
  }
  body.tabsis-mobile-shell.sidebar-open .main-sidebar{
    opacity:1!important;pointer-events:auto!important;
    transform:translate3d(0,0,0)!important;-webkit-transform:translate3d(0,0,0)!important
  }
  body.tabsis-mobile-shell .tabsis-sidebar-backdrop{
    display:block!important;position:fixed!important;inset:100px 0 0 0!important;
    z-index:1050!important;width:100%!important;height:auto!important;
    border:0!important;background:rgba(10,28,17,.42)!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
    transition:opacity .28s ease,visibility 0s linear .28s!important
  }
  body.tabsis-mobile-shell.sidebar-open .tabsis-sidebar-backdrop{
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    transition:opacity .28s ease!important
  }
  body.tabsis-mobile-shell.sidebar-open{overflow:hidden!important}
}

@media(prefers-reduced-motion:reduce){
  body.tabsis-mobile-shell .main-sidebar,body.tabsis-mobile-shell .tabsis-sidebar-backdrop{transition-duration:.01ms!important}
}

/* Indikator proses kecil yang tetap terlihat tanpa menutupi isi aplikasi. */
.tabsis-corner-loader{
  position:fixed;
  left:12px;
  bottom:calc(14px + env(safe-area-inset-bottom,0px));
  z-index:2147483000;
  display:flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  padding:7px 10px;
  border:1px solid rgba(27,94,32,.16);
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:#1b5e20;
  box-shadow:0 7px 22px rgba(19,61,31,.18);
  font:700 11px/1 Arial,sans-serif;
  letter-spacing:.1px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(6px) scale(.96);
  transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
}
.tabsis-corner-loader.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  transition:opacity .16s ease,transform .16s ease;
}
.tabsis-corner-loader-spinner{
  width:16px;
  height:16px;
  flex:0 0 16px;
  border:2px solid rgba(46,125,50,.22);
  border-top-color:#2e7d32;
  border-right-color:#43a047;
  border-radius:50%;
  animation:tabsis-corner-spin .72s linear infinite;
}
@keyframes tabsis-corner-spin{to{transform:rotate(360deg)}}

/* Di portal siswa, posisinya dinaikkan agar tidak bertabrakan dengan menu bawah. */
body.tabsis-student-app .tabsis-corner-loader{
  bottom:calc(78px + env(safe-area-inset-bottom,0px));
}

@media(max-width:420px){
  .tabsis-corner-loader{left:9px;min-height:32px;padding:6px 9px}
  .tabsis-corner-loader-spinner{width:15px;height:15px;flex-basis:15px}
}
@media(prefers-reduced-motion:reduce){
  .tabsis-corner-loader{transition-duration:.01ms}
  .tabsis-corner-loader-spinner{animation-duration:1.35s}
}