/*
 * Digitera V4398 - Android / Mobile App UI
 * IMPORTANT: visual rules are intentionally scoped to <= 767.98px only.
 * Desktop/tablet-wide appearance remains untouched.
 */
@media (max-width: 767.98px) {
  :root{
    --dm-purple:#6f35e8;
    --dm-purple-2:#8b43f4;
    --dm-purple-dark:#33106f;
    --dm-ink:#231b39;
    --dm-muted:#80788f;
    --dm-line:#eeeaf5;
    --dm-surface:#ffffff;
    --dm-bg:#f5f4fb;
    --dm-shadow:0 18px 42px rgba(57,31,112,.10);
    --dm-radius:24px;
    --dm-safe-bottom:max(14px,env(safe-area-inset-bottom));
  }

  html{background:var(--dm-bg)!important;overflow-x:hidden}
  body.digitera-mobile-v4398{
    background:var(--dm-bg)!important;
    color:var(--dm-ink);
    overflow-x:hidden!important;
    padding-bottom:calc(86px + var(--dm-safe-bottom));
    -webkit-tap-highlight-color:transparent;
  }

  /* full-width mobile stage */
  body.digitera-mobile-v4398 main,
  body.digitera-mobile-v4398 .teacher-app-stage,
  body.digitera-mobile-v4398 .teacher-app-stage > main{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
  }
  body.digitera-mobile-v4398 .container{
    width:100%!important;
    max-width:100%!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }

  /* APPLICATION HEADER */
  body.digitera-mobile-v4398:not(.role-teacher) > header.header,
  body.digitera-mobile-v4398:not(.role-teacher) .header{
    position:sticky!important;
    top:0!important;
    z-index:1100!important;
    background:rgba(255,255,255,.92)!important;
    border:0!important;
    border-bottom:1px solid rgba(83,54,148,.06)!important;
    box-shadow:0 8px 24px rgba(53,34,99,.06)!important;
    backdrop-filter:blur(18px) saturate(1.2);
    -webkit-backdrop-filter:blur(18px) saturate(1.2);
  }
  body.digitera-mobile-v4398:not(.role-teacher) .header .container{
    min-height:66px!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
    gap:10px!important;
  }
  body.digitera-mobile-v4398:not(.role-teacher) .brand{
    min-width:0!important;
    gap:9px!important;
  }
  body.digitera-mobile-v4398:not(.role-teacher) .brand-mark{
    width:43px!important;height:43px!important;min-width:43px!important;
    border-radius:14px!important;
    box-shadow:0 10px 24px rgba(111,53,232,.16)!important;
  }
  body.digitera-mobile-v4398:not(.role-teacher) .brand > span:last-child{
    font-size:16px!important;font-weight:900!important;letter-spacing:-.02em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  body.digitera-mobile-v4398:not(.role-teacher) .brand small{
    display:block!important;font-size:9px!important;color:#948ca1!important;font-weight:600!important;
    max-width:150px;overflow:hidden;text-overflow:ellipsis;
  }
  body.digitera-mobile-v4398:not(.role-teacher) .nav-toggle{
    width:42px!important;height:42px!important;min-width:42px!important;border-radius:14px!important;
    background:#f3effd!important;border:1px solid #e5dbfb!important;color:var(--dm-purple)!important;
  }

  /* Teacher mobile topbar - purple wallet-app feeling */
  body.digitera-mobile-v4398.role-teacher .teacher-app-shell{display:block!important;min-height:100vh!important;background:var(--dm-bg)!important}
  body.digitera-mobile-v4398.role-teacher .teacher-app-stage{margin-left:0!important;padding-left:0!important}
  body.digitera-mobile-v4398.role-teacher .teacher-app-topbar{
    position:sticky!important;top:0!important;z-index:1100!important;
    min-height:78px!important;
    border:0!important;
    background:linear-gradient(135deg,#32106f 0%,#5e18c7 45%,#8238f2 100%)!important;
    color:#fff!important;
    box-shadow:0 14px 34px rgba(67,20,146,.24)!important;
  }
  body.digitera-mobile-v4398.role-teacher .teacher-app-topbar-inner{
    min-height:78px!important;padding:10px 14px!important;gap:10px!important;
  }
  body.digitera-mobile-v4398.role-teacher .teacher-sidebar-toggle{
    width:42px!important;height:42px!important;border-radius:14px!important;
    background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.18)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
  }
  body.digitera-mobile-v4398.role-teacher .teacher-sidebar-toggle span{background:#fff!important}
  body.digitera-mobile-v4398.role-teacher .teacher-page-title{min-width:0!important}
  body.digitera-mobile-v4398.role-teacher .teacher-page-title small{color:rgba(255,255,255,.70)!important;font-size:9px!important;letter-spacing:.08em!important;text-transform:uppercase!important}
  body.digitera-mobile-v4398.role-teacher .teacher-page-title strong{color:#fff!important;font-size:16px!important;line-height:1.2!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:45vw!important}
  body.digitera-mobile-v4398.role-teacher .teacher-topbar-actions{gap:7px!important}
  body.digitera-mobile-v4398.role-teacher .teacher-topbar-actions > *{
    min-width:40px!important;min-height:40px!important;border-radius:13px!important;
    background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.18)!important;color:#fff!important;
  }
  body.digitera-mobile-v4398.role-teacher .teacher-topbar-actions .subscription-status,
  body.digitera-mobile-v4398.role-teacher .teacher-topbar-actions .teacher-portal-link,
  body.digitera-mobile-v4398.role-teacher .teacher-topbar-user-copy{display:none!important}

  /* Purple compact hero immediately below header on ordinary pages */
  body.digitera-mobile-v4398 main > .container:first-child .page-head,
  body.digitera-mobile-v4398 main > .container:first-child .page-header,
  body.digitera-mobile-v4398 main > .container:first-child .dashboard-head,
  body.digitera-mobile-v4398 main > .container:first-child .hero-card{
    border-radius:0 0 30px 30px!important;
  }

  /* cards become clean mobile tiles */
  body.digitera-mobile-v4398 .card,
  body.digitera-mobile-v4398 .panel,
  body.digitera-mobile-v4398 .dashboard-card,
  body.digitera-mobile-v4398 .stat-card,
  body.digitera-mobile-v4398 .feature-card,
  body.digitera-mobile-v4398 .pricing-card,
  body.digitera-mobile-v4398 .question-bank-item,
  body.digitera-mobile-v4398 .quiz-card,
  body.digitera-mobile-v4398 .assignment-card,
  body.digitera-mobile-v4398 .document-card,
  body.digitera-mobile-v4398 .media-card{
    border-radius:var(--dm-radius)!important;
    border:1px solid rgba(76,50,129,.07)!important;
    background:#fff!important;
    box-shadow:0 12px 30px rgba(55,35,101,.07)!important;
  }
  body.digitera-mobile-v4398 .card{padding:16px!important}

  /* common grids: prevent horizontal overflow and turn into app cards */
  body.digitera-mobile-v4398 [class*="grid"]{
    max-width:100%!important;
  }
  body.digitera-mobile-v4398 .dashboard-grid,
  body.digitera-mobile-v4398 .stats-grid,
  body.digitera-mobile-v4398 .feature-grid,
  body.digitera-mobile-v4398 .cards-grid,
  body.digitera-mobile-v4398 .teacher-dashboard-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:11px!important;
  }

  /* Forms like native mobile app */
  body.digitera-mobile-v4398 input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  body.digitera-mobile-v4398 select,
  body.digitera-mobile-v4398 textarea{
    min-height:48px!important;
    max-width:100%!important;
    border-radius:14px!important;
    border:1px solid #e7e3ee!important;
    background:#fff!important;
    box-shadow:none!important;
    font-size:16px!important; /* prevents Android/iOS input zoom */
  }
  body.digitera-mobile-v4398 textarea{min-height:96px!important}
  body.digitera-mobile-v4398 .btn,
  body.digitera-mobile-v4398 button:not(.digitera-mobile-dock-main):not(.digitera-mobile-dock-item){
    border-radius:14px!important;
    min-height:44px;
  }
  body.digitera-mobile-v4398 .btn-primary{
    background:linear-gradient(135deg,var(--dm-purple),var(--dm-purple-2))!important;
    border-color:transparent!important;
    color:#fff!important;
    box-shadow:0 11px 22px rgba(111,53,232,.20)!important;
  }

  /* tables stay usable inside phone */
  body.digitera-mobile-v4398 .table-wrap,
  body.digitera-mobile-v4398 .table-responsive,
  body.digitera-mobile-v4398 table{
    max-width:100%!important;
  }
  body.digitera-mobile-v4398 .table-wrap,
  body.digitera-mobile-v4398 .table-responsive{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;border-radius:18px!important}
  body.digitera-mobile-v4398 table{font-size:12px!important}
  body.digitera-mobile-v4398 th,body.digitera-mobile-v4398 td{padding:10px 9px!important}

  /* modal feels like bottom sheet / rounded app screen */
  body.digitera-mobile-v4398 [role="dialog"],
  body.digitera-mobile-v4398 .modal-dialog,
  body.digitera-mobile-v4398 .digitera-image-library-dialog{
    max-width:calc(100vw - 14px)!important;
    width:calc(100vw - 14px)!important;
    max-height:calc(100dvh - 18px)!important;
    border-radius:28px!important;
  }

  /* sidebar becomes a premium slide sheet */
  body.digitera-mobile-v4398.role-teacher .teacher-sidebar{
    width:min(88vw,340px)!important;
    border-radius:0 28px 28px 0!important;
    box-shadow:24px 0 60px rgba(34,13,75,.22)!important;
  }
  body.digitera-mobile-v4398.role-teacher .teacher-sidebar-head{
    background:linear-gradient(135deg,#33106f,#7d32ed)!important;
    color:#fff!important;
    border:0!important;
  }
  body.digitera-mobile-v4398.role-teacher .teacher-sidebar-brand-copy strong,
  body.digitera-mobile-v4398.role-teacher .teacher-sidebar-brand-copy small{color:#fff!important}

  /* generic hamburger nav becomes full mobile sheet */
  body.digitera-mobile-v4398:not(.role-teacher) .nav{
    border-radius:0 0 26px 26px!important;
    padding:12px!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 24px 50px rgba(45,25,91,.14)!important;
  }
  body.digitera-mobile-v4398:not(.role-teacher) .nav a{
    min-height:48px!important;border-radius:14px!important;padding:10px 12px!important;
  }
  body.digitera-mobile-v4398:not(.role-teacher) .nav a.active{
    background:#f0eaff!important;color:var(--dm-purple)!important;
  }

  /* footer simplified on phone - navigation is in dock */
  body.digitera-mobile-v4398 .footer{padding-bottom:18px!important}
  body.digitera-mobile-v4398 .footer-grid{grid-template-columns:1fr!important;gap:18px!important}
  body.digitera-mobile-v4398 .footer-grid > div:not(:first-child){display:none!important}

  /* Floating support/chat stays above bottom dock */
  body.digitera-mobile-v4398 .live-chat-fab,
  body.digitera-mobile-v4398 [class*="chat-fab"],
  body.digitera-mobile-v4398 .developer-global-logout{
    bottom:calc(96px + var(--dm-safe-bottom))!important;
  }

  /* THE APP-LIKE BOTTOM NAVIGATION */
  .digitera-mobile-dock-v4398{
    position:fixed;
    z-index:2147482000;
    left:12px;
    right:12px;
    bottom:var(--dm-safe-bottom);
    height:68px;
    display:grid;
    grid-template-columns:1fr 1fr 78px 1fr 1fr;
    align-items:center;
    padding:5px 8px;
    border-radius:24px;
    background:rgba(255,255,255,.95);
    border:1px solid rgba(92,61,154,.10);
    box-shadow:0 18px 46px rgba(45,21,95,.20),inset 0 1px 0 #fff;
    backdrop-filter:blur(18px) saturate(1.25);
    -webkit-backdrop-filter:blur(18px) saturate(1.25);
  }
  .digitera-mobile-dock-item{
    appearance:none!important;border:0!important;background:transparent!important;
    min-width:0;height:58px;padding:4px 2px!important;margin:0!important;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    text-decoration:none!important;color:#9b96a4!important;
    border-radius:16px!important;font:700 9px/1.1 inherit!important;box-shadow:none!important;
  }
  .digitera-mobile-dock-item svg{width:21px!important;height:21px!important;stroke:currentColor!important;fill:none!important;stroke-width:1.8!important}
  .digitera-mobile-dock-item.is-active{color:var(--dm-purple)!important;background:#f5f1ff!important}
  .digitera-mobile-dock-item span{display:block;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .digitera-mobile-dock-center{height:68px;position:relative;display:grid;place-items:center}
  .digitera-mobile-dock-main{
    appearance:none!important;width:60px!important;height:60px!important;min-width:60px!important;min-height:60px!important;
    margin-top:-22px!important;border-radius:22px!important;border:5px solid #f5f4fb!important;
    display:grid!important;place-items:center!important;background:linear-gradient(145deg,#7435ed,#962fff)!important;
    color:#fff!important;box-shadow:0 14px 28px rgba(111,53,232,.34)!important;padding:0!important;
  }
  .digitera-mobile-dock-main svg{width:28px!important;height:28px!important;stroke:#fff!important;fill:none!important;stroke-width:1.8!important}
  .digitera-mobile-dock-main:active{transform:translateY(1px) scale(.97)}

  /* Student already has bottom nav: restyle it instead of duplicating */
  body.digitera-mobile-v4398.role-student .student-bottom-nav{
    left:12px!important;right:12px!important;bottom:var(--dm-safe-bottom)!important;width:auto!important;
    border-radius:24px!important;border:1px solid rgba(92,61,154,.10)!important;
    background:rgba(255,255,255,.96)!important;box-shadow:0 18px 46px rgba(45,21,95,.20)!important;
    overflow:visible!important;padding:6px!important;min-height:68px!important;
  }
  body.digitera-mobile-v4398.role-student .student-bottom-nav a{border-radius:15px!important;color:#9b96a4!important}
  body.digitera-mobile-v4398.role-student .student-bottom-nav a.active{background:#f2ecff!important;color:var(--dm-purple)!important}

  /* typography */
  body.digitera-mobile-v4398 h1{font-size:clamp(1.65rem,7vw,2.25rem)!important;letter-spacing:-.04em!important;line-height:1.08!important}
  body.digitera-mobile-v4398 h2{font-size:clamp(1.3rem,5.4vw,1.75rem)!important;letter-spacing:-.025em!important}
  body.digitera-mobile-v4398 p{line-height:1.6}

  /* compact gaps, more app-like */
  body.digitera-mobile-v4398 main{padding-top:12px!important}
  body.digitera-mobile-v4398 .section{padding-top:22px!important;padding-bottom:22px!important}
  body.digitera-mobile-v4398 .actions{gap:8px!important;flex-wrap:wrap!important}
  body.digitera-mobile-v4398 img{max-width:100%;height:auto}

  /* Don't force the app dock over immersive/live game pages */
  body.digitera-mobile-v4398.student-play-mode .digitera-mobile-dock-v4398,
  body.digitera-mobile-v4398.digitera-mobile-immersive .digitera-mobile-dock-v4398{display:none!important}
  body.digitera-mobile-v4398.student-play-mode{padding-bottom:0!important}
}

/* =============================================================
 * V4403 HARD FIX — HEADER MOBILE HARUS MENEMPEL KE ATAS
 * Dipasang langsung pada asset mobile V4398 yang sudah aktif.
 * Desktop >= 768px tidak disentuh.
 * ============================================================= */
@media (max-width: 767.98px) {
  html,
  body.digitera-mobile-v4398{
    margin-top:0!important;
    padding-top:0!important;
    scroll-padding-top:66px!important;
  }

  /* Nonaktifkan spacer header lama agar tidak menciptakan ruang kosong ganda. */
  body.digitera-mobile-v4398 .digitera-header-spacer-v4402,
  body.digitera-mobile-v4398 .digitera-mobile-header-spacer-v4401{
    display:none!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    flex-basis:0!important;
    margin:0!important;
    padding:0!important;
  }

  body.digitera-mobile-v4398 .digitera-mobile-header-spacer-v4403{
    display:block!important;
    width:100%!important;
    height:var(--digitera-mobile-header-h-v4403,58px)!important;
    min-height:var(--digitera-mobile-header-h-v4403,58px)!important;
    max-height:var(--digitera-mobile-header-h-v4403,58px)!important;
    flex:0 0 var(--digitera-mobile-header-h-v4403,58px)!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    pointer-events:none!important;
  }

  /* Selector dibuat sengaja lebar supaya semua jenis header terjangkau. */
  body.digitera-mobile-v4398 header.topbar,
  body.digitera-mobile-v4398 header.header,
  body.digitera-mobile-v4398 .teacher-app-topbar,
  body.digitera-mobile-v4398 .student-app-topbar,
  body.digitera-mobile-v4398 .student-app-topbar-unified,
  body.digitera-mobile-v4398 [data-student-unified-header],
  body.digitera-mobile-v4398 .digitera-header-hardfix-v4403{
    position:fixed!important;
    position:-webkit-fixed!important;
    top:0!important;
    inset-block-start:0!important;
    left:0!important;
    right:0!important;
    inset-inline:0!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    margin-top:0!important;
    z-index:2147483600!important;
  }

  /* Public + developer header dibuat benar-benar ringkas. */
  body.digitera-mobile-v4398:not(.role-teacher):not(.role-student) header.topbar,
  body.digitera-mobile-v4398:not(.role-teacher):not(.role-student) header.header{
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    padding:0!important;
    background:rgba(255,255,255,.985)!important;
    border-top:0!important;
    border-bottom:1px solid rgba(83,54,148,.08)!important;
    box-shadow:0 7px 20px rgba(48,30,92,.08)!important;
  }
  body.digitera-mobile-v4398:not(.role-teacher):not(.role-student) header.topbar .nav-wrap,
  body.digitera-mobile-v4398:not(.role-teacher):not(.role-student) header.header .nav-wrap{
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    padding:4px 13px!important;
    margin:0 auto!important;
    align-items:center!important;
  }
  body.digitera-mobile-v4398:not(.role-teacher):not(.role-student) header.topbar .brand-mark,
  body.digitera-mobile-v4398:not(.role-teacher):not(.role-student) header.header .brand-mark{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    border-radius:11px!important;
  }
  body.digitera-mobile-v4398:not(.role-teacher):not(.role-student) header.topbar .brand>span:last-child,
  body.digitera-mobile-v4398:not(.role-teacher):not(.role-student) header.header .brand>span:last-child{
    font-size:14px!important;
    line-height:1.05!important;
  }
  body.digitera-mobile-v4398:not(.role-teacher):not(.role-student) header.topbar .brand small,
  body.digitera-mobile-v4398:not(.role-teacher):not(.role-student) header.header .brand small{
    font-size:7.5px!important;
    margin-top:1px!important;
  }
  body.digitera-mobile-v4398:not(.role-teacher):not(.role-student) header.topbar .nav-toggle,
  body.digitera-mobile-v4398:not(.role-teacher):not(.role-student) header.header .nav-toggle{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    border-radius:11px!important;
  }

  /* Guru */
  body.digitera-mobile-v4398.role-teacher .teacher-app-shell,
  body.digitera-mobile-v4398.role-teacher .teacher-app-stage{
    transform:none!important;
    translate:none!important;
    perspective:none!important;
    filter:none!important;
    overflow:visible!important;
  }
  body.digitera-mobile-v4398.role-teacher .teacher-app-topbar{
    height:60px!important;
    min-height:60px!important;
    max-height:60px!important;
    margin:0!important;
    padding:0!important;
  }
  body.digitera-mobile-v4398.role-teacher .teacher-app-topbar-inner{
    height:60px!important;
    min-height:60px!important;
    max-height:60px!important;
    padding:6px 10px!important;
    margin:0!important;
  }

  /* Siswa */
  body.digitera-mobile-v4398.role-student .student-app-shell{
    transform:none!important;
    translate:none!important;
    perspective:none!important;
    filter:none!important;
    overflow:visible!important;
  }
  body.digitera-mobile-v4398.role-student .student-app-topbar,
  body.digitera-mobile-v4398.role-student .student-app-topbar-unified,
  body.digitera-mobile-v4398.role-student [data-student-unified-header]{
    height:58px!important;
    min-height:58px!important;
    max-height:58px!important;
    margin:0!important;
    padding:0!important;
  }

  body.digitera-mobile-v4398 [id]{
    scroll-margin-top:66px!important;
  }

  /* Halaman fullscreen tetap tidak diberi header. */
  body.digitera-mobile-v4398.student-play-mode .digitera-header-hardfix-v4403,
  body.digitera-mobile-v4398.digitera-mobile-immersive .digitera-header-hardfix-v4403,
  body.digitera-mobile-v4398.student-play-mode .digitera-mobile-header-spacer-v4403,
  body.digitera-mobile-v4398.digitera-mobile-immersive .digitera-mobile-header-spacer-v4403{
    display:none!important;
  }
}