/* PERANGKAT Responsive Hardening V18 — final cascade layer
   Loaded last to resolve older mobile rules without changing application logic. */

:root{
  --rh-gutter:clamp(10px,2.6vw,20px);
  --rh-touch:44px;
  --rh-radius:14px;
}

html,body{max-width:100%;overflow-x:hidden}
body{min-width:0!important}
*,*::before,*::after{box-sizing:border-box}
img,svg,video,canvas,iframe,object,embed{max-width:100%;height:auto}
pre,code{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
:is(.pa-admin-main,.pa-admin-content,.public-main,.container,.panel,.card,.toolbar,.page-title,.form-grid,.filters,.inline-actions,.resource-item,.activity-question-row,.activity-question-main,.worksheet-studio-grid,.worksheet-editor-panel,.worksheet-canvas){min-width:0}
:is(input,select,textarea,button,.btn){max-width:100%}

/* ---------- ADMIN / TEACHER APP ---------- */
@media(max-width:1080px){
  .pa-admin-shell{display:block!important;width:100%!important}
  .pa-admin-main{width:100%!important;max-width:100%!important}
  .pa-admin-sidebar{
    width:min(300px,88vw)!important;
    min-width:0!important;
    max-width:min(300px,88vw)!important;
    flex-basis:auto!important;
    height:100dvh!important;
    padding:12px 10px calc(12px + env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .pa-sidebar-close{display:grid!important}
  .pa-admin-top{padding-left:max(10px,env(safe-area-inset-left))!important;padding-right:max(10px,env(safe-area-inset-right))!important}
  .pa-admin-content{width:100%!important;max-width:100%!important;margin:0!important;padding:14px var(--rh-gutter) calc(24px + env(safe-area-inset-bottom))!important}
}

@media(max-width:760px){
  .pa-admin-body{font-size:15px!important}
  .pa-admin-top{
    min-height:54px!important;
    gap:8px!important;
    padding-top:7px!important;
    padding-bottom:7px!important;
  }
  .pa-admin-top-left{gap:7px!important;min-width:0!important}
  .pa-sidebar-toggle,.pa-command-trigger{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important}
  .pa-user-menu{min-width:0!important;margin-left:auto!important}
  .pa-user-badge{
    display:block!important;
    max-width:min(42vw,150px)!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .page-title{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:9px!important;
    width:100%!important;
    margin-bottom:12px!important;
  }
  .page-title>div:first-child{width:100%!important;min-width:0!important}
  .page-title h1{font-size:clamp(1.2rem,5.4vw,1.48rem)!important;line-height:1.22!important;overflow-wrap:anywhere}
  .page-title p{font-size:.84rem!important;line-height:1.45!important;max-width:none!important}
  .page-title>.inline-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    max-width:none!important;
    gap:7px!important;
  }
  .page-title>.inline-actions>*{width:100%!important;min-width:0!important}
  .page-title>.inline-actions .btn{width:100%!important;min-height:42px!important;white-space:normal!important}

  .panel{width:100%!important;max-width:100%!important;padding:12px!important;margin-bottom:10px!important;border-radius:12px!important;overflow:visible}
  .panel>h2,.panel>h3{font-size:1rem!important;line-height:1.3!important}
  .dashboard-grid,.system-checks,.signature-uploader,.school-brand-editor,.student-photo-editor{grid-template-columns:1fr!important}

  .kpi-grid,.kpi-grid.compact-kpi,.compact-kpi,.sp-kpis{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
  }
  .kpi,.sp-kpi{min-width:0!important;padding:11px 9px!important;text-align:left!important}
  .kpi strong,.sp-kpi strong{font-size:1.28rem!important}
  .kpi span,.sp-kpi span{font-size:.75rem!important;line-height:1.3!important;overflow-wrap:anywhere}

  .toolbar,.filter-bar{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:8px!important;
    width:100%!important;
  }
  .toolbar>*{max-width:100%!important}
  .toolbar>.filters,.toolbar>.inline-actions,.filter-bar>.filters{width:100%!important;flex:none!important}

  .filters,.filters-compact,form.filters{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:stretch!important;
    width:100%!important;
    gap:8px!important;
  }
  .filters>*,.filters-compact>*,form.filters>*{
    grid-column:auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    flex:none!important;
  }
  .filter-more{width:100%!important}
  .filter-more>summary{width:100%!important;min-height:44px!important}
  .filter-more-body{left:max(10px,env(safe-area-inset-left))!important;right:max(10px,env(safe-area-inset-right))!important;bottom:max(10px,env(safe-area-inset-bottom))!important;width:auto!important;max-height:72dvh!important}

  .form-grid,.school-brand-fields,.advanced-settings-body{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    gap:10px!important;
  }
  .form-grid>*{grid-column:auto!important;min-width:0!important}
  .form-group.full,.simple-form-section{grid-column:1!important}
  .input,.select,.textarea,input,select,textarea{width:100%!important;min-width:0!important;font-size:16px!important}
  input[type="checkbox"],input[type="radio"]{width:auto!important;min-height:0!important}
  input[type="file"]{font-size:.9rem!important;overflow:hidden}
  .input-action{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  .input-action .btn{width:100%!important}

  .form-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
  }
  .form-actions>*{min-width:0!important;width:100%!important}
  .form-actions .btn{width:100%!important;white-space:normal!important}

  /* Real card tables: no hidden horizontal table width on phones. */
  .table-wrap.is-card-table-wrap{
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
  }
  table.table.responsive-table{display:block!important;width:100%!important;min-width:0!important;background:transparent!important;border-collapse:separate!important}
  table.table.responsive-table thead{display:none!important}
  table.table.responsive-table tbody{display:grid!important;width:100%!important;gap:9px!important}
  table.table.responsive-table tr{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:7px 0!important;
    overflow:hidden!important;
    border:1px solid var(--line)!important;
    border-radius:12px!important;
    background:#fff!important;
    box-shadow:0 3px 12px rgba(11,47,74,.035)!important;
  }
  table.table.responsive-table td{
    display:grid!important;
    grid-template-columns:minmax(86px,31%) minmax(0,1fr)!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    padding:7px 10px!important;
    border:0!important;
    overflow:visible!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  table.table.responsive-table td::before{
    content:attr(data-label)!important;
    display:block!important;
    min-width:0!important;
    color:var(--muted)!important;
    font-size:.7rem!important;
    font-weight:850!important;
    line-height:1.3!important;
    letter-spacing:.035em!important;
    text-transform:uppercase!important;
    overflow-wrap:anywhere!important;
  }
  table.table.responsive-table td[colspan]{display:block!important}
  table.table.responsive-table td[colspan]::before{display:none!important}
  table.table.responsive-table td[data-label="Aksi"]{
    display:block!important;
    margin-top:4px!important;
    padding-top:9px!important;
    border-top:1px solid var(--line)!important;
  }
  table.table.responsive-table td[data-label="Aksi"]::before{display:none!important}
  table.table.responsive-table td[data-label="Aksi"]>.inline-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    gap:7px!important;
  }
  table.table.responsive-table td[data-label="Aksi"]>.inline-actions>*{width:100%!important;min-width:0!important}
  table.table.responsive-table td[data-label="Aksi"] .btn,
  table.table.responsive-table td[data-label="Aksi"] summary{width:100%!important;min-height:40px!important;justify-content:center!important;white-space:normal!important}

  .inline-actions{max-width:100%!important;min-width:0!important}
  .resource-item{align-items:flex-start!important;max-width:100%!important;overflow-wrap:anywhere}

  .workspace-tabs{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 10px!important;
    overflow-x:auto!important;
    overscroll-behavior-inline:contain!important;
    scroll-snap-type:x proximity;
  }
  .workspace-tabs a{flex:0 0 auto!important;min-height:40px!important;scroll-snap-align:start}

  .pa-command{padding:64px 8px 8px!important;align-items:start!important}
  .pa-command-dialog{width:100%!important;max-width:620px!important;max-height:calc(100dvh - 78px)!important;overflow:hidden!important}
  .pa-command-results{max-height:calc(100dvh - 155px)!important}
  .pa-user-menu-panel{position:fixed!important;top:58px!important;right:10px!important;left:auto!important;max-width:calc(100vw - 20px)!important;min-width:min(220px,calc(100vw - 20px))!important}
}

@media(max-width:430px){
  .pa-admin-content{padding-left:9px!important;padding-right:9px!important}
  .page-title{flex-direction:column!important;align-items:stretch!important}
  .page-title>.inline-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .page-title>.inline-actions .btn{display:flex!important}
  .kpi-grid,.kpi-grid.compact-kpi,.compact-kpi,.sp-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .form-actions{grid-template-columns:1fr!important}
  table.table.responsive-table td{grid-template-columns:1fr!important;gap:3px!important}
  table.table.responsive-table td::before{margin-bottom:1px!important}
  .pa-user-badge{max-width:34vw!important}
}

@media(max-width:350px){
  .kpi-grid,.kpi-grid.compact-kpi,.compact-kpi,.sp-kpis{grid-template-columns:1fr!important}
  .pa-user-badge{display:none!important}
}

/* ---------- PUBLIC / STUDENT APP ---------- */
@media(max-width:980px){
  .public-main{width:100%!important;max-width:100%!important}
  .public-sidebar{height:100dvh!important;padding-bottom:calc(12px + env(safe-area-inset-bottom))!important}
  .public-appbar{padding-left:max(9px,env(safe-area-inset-left))!important;padding-right:max(9px,env(safe-area-inset-right))!important}
}

@media(max-width:760px){
  .public-appbar{min-height:52px!important;gap:8px!important}
  .public-appbar-brand{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .public-main>.section{padding:10px 0 18px!important}
  .public-main .container{width:auto!important;max-width:none!important;margin-left:9px!important;margin-right:9px!important}
  .public-main .section-head{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;margin-bottom:10px!important}
  .public-main .section-head h1,.public-main .section-head h2{font-size:1.25rem!important;line-height:1.25!important;overflow-wrap:anywhere}
  .portal-filters{display:grid!important;grid-template-columns:1fr!important;gap:7px!important;width:100%!important}
  .portal-filters>*{grid-column:auto!important;width:100%!important;min-width:0!important}
  .package-grid{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .package-grid .card{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    padding:12px!important;
  }
  .package-grid .card-actions{display:grid!important;grid-template-columns:1fr!important;margin-top:9px!important}
  .package-grid .card-actions .btn{width:100%!important;min-height:42px!important}
  .resource-list{gap:8px!important}
  .resource-item{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:7px!important;padding:11px!important}
  .resource-item>*{min-width:0!important}
  .footer{padding:16px 0!important;margin-top:12px!important}
  .footer-grid{display:grid!important;grid-template-columns:1fr!important;gap:3px!important}
  .login-shell{padding:10px!important;align-items:start!important;padding-top:max(14px,env(safe-area-inset-top))!important}
  .login-card{width:100%!important;max-width:460px!important;padding:18px 14px!important;border-radius:16px!important}
}

@media(max-width:430px){
  .resource-item{grid-template-columns:1fr!important}
  .resource-item .badge{justify-self:start!important}
}

/* ---------- ACTIVITIES / QUIZ / PAPER / WORKSHEET ---------- */
@media(max-width:760px){
  .activity-public{min-height:0!important}
  .activity-join-card{max-width:none!important;margin:10px 0!important}
  .activity-code-form{grid-template-columns:1fr!important}
  .activity-code-form .btn{width:100%!important}
  .activity-run-head{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;margin:10px 0!important}
  .activity-run-progress{width:100%!important;min-width:0!important;margin:0!important}
  .activity-run-question{width:100%!important;max-width:100%!important}
  .activity-run-question h2{font-size:1.02rem!important}
  .activity-run-question .activity-stem{font-size:1rem!important;line-height:1.55!important}
  .activity-answer-option{padding:10px!important;border-radius:11px!important}
  .activity-run-actions{
    position:sticky!important;
    left:0!important;right:0!important;bottom:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    width:100%!important;
    margin-top:12px!important;
    padding:8px!important;
    padding-bottom:calc(8px + env(safe-area-inset-bottom))!important;
    border:1px solid var(--line,#d9e3ea)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.96)!important;
    backdrop-filter:blur(12px)!important;
    z-index:12!important;
  }
  .activity-run-actions>*{width:100%!important;min-width:0!important}

  .activity-question-row{
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:9px!important;
    align-items:start!important;
    padding:10px!important;
  }
  .activity-question-no{width:36px!important;height:36px!important}
  .activity-question-row>.inline-actions{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    padding-left:0!important;
    overflow:visible!important;
    gap:7px!important;
  }
  .activity-question-row>.inline-actions>*{width:100%!important;min-width:0!important}
  .option-edit-row{grid-template-columns:1fr!important;gap:7px!important}
  .option-key{justify-content:flex-start!important;padding:0 10px!important}
  .option-edit-row .option-mis{grid-column:auto!important}
  .activity-share-grid{grid-template-columns:1fr!important}
  .activity-big-code{font-size:clamp(1.7rem,10vw,2.5rem)!important;overflow-wrap:anywhere}
  .activity-dimension-grid{grid-template-columns:1fr!important}

  /* Worksheet canvas uses percentage coordinates, so it may safely scale to phone width. */
  .worksheet-studio-grid{grid-template-columns:1fr!important;gap:8px!important}
  .worksheet-tools{position:static!important;width:100%!important}
  .worksheet-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .worksheet-tool-grid>*{min-width:0!important;width:100%!important;white-space:normal!important}
  .worksheet-editor-panel{width:100%!important;max-width:100%!important;overflow:visible!important;padding:4px!important}
  .worksheet-canvas{width:100%!important;max-width:100%!important;min-width:0!important;margin:0 auto!important;touch-action:none}
  .worksheet-pages{max-width:100%!important;overscroll-behavior-inline:contain!important}
  .worksheet-dialog{width:calc(100vw - 16px)!important;max-width:none!important;max-height:calc(100dvh - 16px)!important;overflow:auto!important}
  .worksheet-dialog>form:first-child{padding:12px!important}
  .worksheet-upload-panel .toolbar{align-items:stretch!important}
  .worksheet-upload-panel input[type=file]{max-width:100%!important;width:100%!important}
  .worksheet-submitbar{bottom:0!important;padding:6px!important;padding-bottom:calc(6px + env(safe-area-inset-bottom))!important}
  .worksheet-submitbar>div{width:100%!important;border-radius:12px!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .worksheet-submitbar>div>*{width:100%!important;min-width:0!important}
  .ws-join-lines{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)!important;gap:5px!important}
  .ws-join-node{padding:7px 6px!important;font-size:.82rem!important;overflow-wrap:anywhere}

  /* Presenter becomes a compact vertical app on phones. */
  .paper-stage{min-height:100dvh!important;padding:10px!important;padding-bottom:calc(10px + env(safe-area-inset-bottom))!important;gap:10px!important}
  .paper-stage-top{align-items:flex-start!important;gap:8px!important}
  .paper-stage-title{min-width:0!important}
  .paper-stage-title strong{font-size:1rem!important;overflow-wrap:anywhere}
  .paper-stage-title span{font-size:.82rem!important}
  .paper-stage-count{flex:0 0 auto!important;font-size:1.3rem!important}
  .paper-stage-question{align-content:start!important;overflow:auto!important;padding:4px 0!important}
  .paper-stage-number{margin-bottom:7px!important}
  .paper-stage-question h1{font-size:clamp(1.22rem,6vw,1.8rem)!important;line-height:1.28!important;margin-bottom:12px!important}
  .paper-stage-options{grid-template-columns:1fr!important;gap:8px!important}
  .paper-stage-option{padding:10px!important;gap:10px!important;border-radius:12px!important;font-size:.96rem!important}
  .paper-stage-option strong{min-width:38px!important;height:38px!important;border-radius:10px!important}
  .paper-stage-bottom{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important;gap:8px!important}
  .paper-stage-controls{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .paper-stage-controls>*{width:100%!important;min-width:0!important;min-height:44px!important;padding:0 8px!important;text-align:center!important;white-space:normal!important}

  .paper-scanner{width:100%!important;max-width:none!important;padding:8px!important;padding-bottom:calc(8px + env(safe-area-inset-bottom))!important}
  .paper-scanner-head{align-items:flex-start!important;gap:8px!important}
  .paper-scanner-camera{width:100%!important;max-height:58dvh!important;border-radius:12px!important}
  .paper-scanner-status{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important;gap:7px!important}
  .paper-scanner-status button{width:100%!important;min-height:44px!important}
  .paper-scan-student{grid-template-columns:1fr!important;padding:9px!important}
  .paper-scan-student .answer-buttons{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;width:100%!important;gap:6px!important}
  .paper-scan-student button{width:100%!important;min-width:0!important;height:42px!important}
  .live-dist-row{grid-template-columns:34px minmax(0,1fr) 38px!important;gap:7px!important;font-size:.9rem!important}
}

@media(max-width:430px){
  .worksheet-tool-grid{grid-template-columns:1fr 1fr!important}
  .activity-run-actions,.paper-stage-controls,.worksheet-submitbar>div{grid-template-columns:1fr!important}
}

/* Dialogs and popovers can never escape the device viewport. */
dialog{max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important}
.floating-action-panel{max-width:calc(100vw - 20px)!important}

@media(orientation:landscape) and (max-height:520px) and (pointer:coarse){
  .pa-admin-top{position:relative!important}
  .paper-stage{padding:8px!important;grid-template-rows:auto minmax(0,1fr) auto!important}
  .paper-stage-question h1{font-size:1.2rem!important;margin-bottom:8px!important}
  .paper-stage-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .paper-stage-option{padding:7px 9px!important}
  .paper-scanner-camera{max-height:56dvh!important}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
}