/*
 * Native UI V13 — progressive polish layer.
 * Intentionally conservative: it improves motion, touch, focus, scrolling,
 * spacing and responsive ergonomics without changing application logic.
 */
@layer paNativeV13 {
  :root{
    --pa13-navy:#123f5f;
    --pa13-blue:#197aa5;
    --pa13-gold:#f0bd35;
    --pa13-bg:#eef3f6;
    --pa13-surface:#ffffff;
    --pa13-text:#172a3a;
    --pa13-muted:#627483;
    --pa13-line:#d7e2e9;
    --pa13-radius:18px;
    --pa13-shadow:0 12px 34px rgba(18,63,95,.10);
    --pa13-shadow-soft:0 5px 18px rgba(18,63,95,.07);
    --pa13-ease:cubic-bezier(.2,.8,.2,1);
    --pa13-safe-bottom:max(14px,env(safe-area-inset-bottom));
  }

  html{
    min-width:320px;
    scroll-behavior:smooth;
    scroll-padding-top:82px;
    scrollbar-gutter:stable;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }

  body{
    min-height:100dvh;
    max-width:100%;
    overflow-x:hidden;
    overscroll-behavior-y:auto;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  body,
  .sheet-viewport,
  .table-wrap,
  .table-responsive,
  [class*="table-wrap"],
  [class*="scroll"]{
    -webkit-overflow-scrolling:touch;
  }

  img,svg,video,canvas,iframe{max-width:100%;height:auto}
  iframe{border:0}

  :is(a,button,input,select,textarea,[role="button"],summary){
    -webkit-tap-highlight-color:transparent;
  }

  :is(button,.btn,a.btn,[role="button"],summary){
    touch-action:manipulation;
    transition:
      transform .18s var(--pa13-ease),
      box-shadow .18s var(--pa13-ease),
      background-color .18s var(--pa13-ease),
      border-color .18s var(--pa13-ease),
      color .18s var(--pa13-ease),
      opacity .18s var(--pa13-ease);
  }

  :is(button,.btn,a.btn,[role="button"],summary):active{
    transform:scale(.985);
  }

  :is(a,button,input,select,textarea,[role="button"],summary):focus-visible{
    outline:3px solid rgba(25,122,165,.33)!important;
    outline-offset:3px!important;
  }

  :is(button,input,select,textarea,.btn,[role="button"]):disabled,
  [aria-disabled="true"]{
    opacity:.58;
    cursor:not-allowed;
    transform:none!important;
  }

  :is(.card,.panel,.section,.info-card,.pro-panel,.viewer-card,.status-card,.metric,.question,fieldset){
    transition:box-shadow .22s var(--pa13-ease),border-color .22s var(--pa13-ease),transform .22s var(--pa13-ease);
  }

  .table-wrap,.table-responsive,[class*="table-wrap"]{
    max-width:100%;
    overflow:auto;
    overscroll-behavior-inline:contain;
    scrollbar-width:thin;
    scrollbar-color:#9fb5c2 transparent;
  }

  .table-wrap::-webkit-scrollbar,
  .table-responsive::-webkit-scrollbar,
  [class*="table-wrap"]::-webkit-scrollbar{height:9px;width:9px}
  .table-wrap::-webkit-scrollbar-thumb,
  .table-responsive::-webkit-scrollbar-thumb,
  [class*="table-wrap"]::-webkit-scrollbar-thumb{background:#aabdc8;border-radius:99px;border:2px solid transparent;background-clip:padding-box}

  table{max-width:100%}
  th,td{overflow-wrap:anywhere}

  .navlinks,.nav,.top-actions,.toolbar-actions,.tabs,.pro-tabs,.actions-scroll{
    scrollbar-width:none;
  }
  .navlinks::-webkit-scrollbar,.nav::-webkit-scrollbar,.top-actions::-webkit-scrollbar,.toolbar-actions::-webkit-scrollbar,.tabs::-webkit-scrollbar,.pro-tabs::-webkit-scrollbar,.actions-scroll::-webkit-scrollbar{display:none}

  .status:empty,.hint:empty,.notice:empty,.helper:empty,.help-text:empty,.description:empty{display:none!important}
  .diagnostic-item>.item-hint{display:none!important}
  [hidden]{display:none!important}

  .scroll-top,[class*="scroll-top"],button[aria-label*="atas" i],a[aria-label*="atas" i]{
    opacity:0;
    pointer-events:none;
    transform:translateY(10px) scale(.94);
    transition:opacity .2s var(--pa13-ease),transform .2s var(--pa13-ease)!important;
  }
  .scroll-top.pa-scrolltop-visible,[class*="scroll-top"].pa-scrolltop-visible,button[aria-label*="atas" i].pa-scrolltop-visible,a[aria-label*="atas" i].pa-scrolltop-visible{
    opacity:1;
    pointer-events:auto;
    transform:none;
  }

  body.pa-is-scrolling .roster-quick-access{
    opacity:.72;
    transform:scale(.94);
  }

  @media (hover:hover) and (pointer:fine){
    :is(button,.btn,a.btn,[role="button"]):not(:disabled):hover{
      transform:translateY(-1px);
    }
    :is(.card,.panel,.info-card,.pro-panel,.viewer-card):hover{
      border-color:#c6d7e1;
      box-shadow:var(--pa13-shadow);
    }
  }

  @media(max-width:760px){
    html{scroll-padding-top:70px}
    body{
      min-width:320px;
      padding-bottom:env(safe-area-inset-bottom);
      background:var(--pa13-bg);
    }

    body::selection{background:rgba(25,122,165,.20)}

    :is(.shell,.container,.wrapper,.wrap,.doc-shell,.pro-shell,.page-shell){
      max-width:calc(100% - 12px)!important;
      margin-inline:auto!important;
    }

    :is(.card,.panel,.section,.info-card,.pro-panel,.viewer-card,.status-card,.metric,.question,fieldset){
      max-width:100%!important;
      border-radius:16px!important;
      box-shadow:var(--pa13-shadow-soft);
    }

    :is(.topbar,.site-header,header.top,.toolbar,.pro-toolbar){
      max-width:100%;
      -webkit-backdrop-filter:blur(16px) saturate(1.12);
      backdrop-filter:blur(16px) saturate(1.12);
    }

    :is(.navlinks,.nav,.top-actions,.toolbar-actions,.tabs,.pro-tabs,.actions-scroll){
      display:flex!important;
      flex-wrap:nowrap!important;
      max-width:100%!important;
      overflow-x:auto!important;
      overscroll-behavior-inline:contain;
      scroll-snap-type:x proximity;
      scroll-padding-inline:8px;
      gap:8px;
      padding-bottom:3px;
    }

    :is(.navlinks,.nav,.top-actions,.toolbar-actions,.tabs,.pro-tabs,.actions-scroll)>*{
      flex:0 0 auto!important;
      white-space:nowrap!important;
      scroll-snap-align:start;
    }

    :is(button,.btn,a.btn,[role="button"],summary){
      min-height:44px;
    }

    input,select,textarea{
      min-height:46px;
      font-size:16px!important;
    }

    textarea{line-height:1.5}

    :is(.grid,.pro-grid,.hero-grid,.student-grid,.profile-head,.stats,.filters,.reading-layout){
      min-width:0;
    }

    .table-wrap,.table-responsive,[class*="table-wrap"]{
      border-radius:12px;
    }

    .roster-quick-access{
      left:10px!important;
      bottom:calc(12px + env(safe-area-inset-bottom))!important;
      width:46px!important;
      height:46px!important;
      min-width:46px!important;
      min-height:46px!important;
      padding:0!important;
      justify-content:center!important;
      border-width:2px!important;
      box-shadow:0 10px 24px rgba(8,44,67,.24)!important;
    }

    .roster-quick-access__label{
      position:absolute!important;
      width:1px!important;
      height:1px!important;
      overflow:hidden!important;
      clip:rect(0,0,0,0)!important;
      white-space:nowrap!important;
    }

    .scroll-top,[class*="scroll-top"],button[aria-label*="atas" i],a[aria-label*="atas" i]{
      width:46px!important;
      height:46px!important;
      min-width:46px!important;
      min-height:46px!important;
      right:10px!important;
      bottom:calc(12px + env(safe-area-inset-bottom))!important;
      font-size:1.08rem!important;
    }

  }

  @media(max-width:420px){
    :is(.shell,.container,.wrapper,.wrap,.doc-shell,.pro-shell,.page-shell){
      max-width:calc(100% - 8px)!important;
    }
    :is(.card,.panel,.section,.info-card,.pro-panel,.viewer-card,.status-card,.metric,.question,fieldset){
      border-radius:14px!important;
    }
  }

  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{
      animation-duration:.001ms!important;
      animation-iteration-count:1!important;
      transition-duration:.001ms!important;
      scroll-behavior:auto!important;
    }
  }

  @media print{
    .roster-quick-access,.scroll-top,[class*="scroll-top"],button[aria-label*="atas" i],a[aria-label*="atas" i]{display:none!important}
  }
}

/* V12.6 — koreksi khusus HP; tidak menambah elemen/menu. */
@media(max-width:760px){
  th,td{overflow-wrap:break-word!important;word-break:normal!important;hyphens:none!important}
  .roster-quick-access,.scroll-top,[class*="scroll-top"],button[aria-label*="atas" i],a[aria-label*="atas" i]{display:none!important}
}