/* KINAWA 14.4.28 — native mobile shell, persistent app bar, contextual action dock */
:root{
  --kinawa-native-header:64px;
  --kinawa-native-dock:66px;
  --kinawa-safe-top:env(safe-area-inset-top,0px);
  --kinawa-safe-bottom:env(safe-area-inset-bottom,0px);
  --kinawa-native-line:rgba(148,163,184,.22);
  --kinawa-native-glass:rgba(255,255,255,.92);
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--kinawa-native-header) + var(--kinawa-safe-top) + 14px);
  overscroll-behavior-y:none;
  background:#eef6ff;
}
body.kinawa-premium-ui{
  min-height:100dvh!important;
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
}
/* overflow:hidden on an ancestor breaks sticky in a number of Android WebViews. */
.app-shell,.app-shell .main{
  overflow-x:clip!important;
  overflow-y:visible!important;
}
.app-shell .topbar{
  position:sticky!important;
  top:0!important;
  z-index:72!important;
  isolation:isolate;
  background:var(--kinawa-native-glass)!important;
  border-bottom:1px solid var(--kinawa-native-line)!important;
  box-shadow:0 3px 16px rgba(15,23,42,.045)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  backdrop-filter:blur(18px) saturate(145%);
  transition:box-shadow .2s ease,background-color .2s ease,border-color .2s ease!important;
}
.app-shell .topbar.is-scrolled{
  background:rgba(255,255,255,.97)!important;
  border-bottom-color:rgba(148,163,184,.34)!important;
  box-shadow:0 10px 28px rgba(15,23,42,.12)!important;
}
.app-shell .topbar-progress{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  overflow:hidden;
  pointer-events:none;
}
.app-shell .topbar-progress>i{
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(var(--kinawa-scroll-progress,0));
  transform-origin:left center;
  background:linear-gradient(90deg,#3768ff,#27b171);
  transition:transform .08s linear;
}
.app-shell .hamb{
  position:relative!important;
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  overflow:hidden!important;
  touch-action:manipulation;
}
.app-shell .hamb::before{content:none!important}
.app-shell .hamb span{
  display:block!important;
  width:22px!important;
  height:2.5px!important;
  margin:0!important;
  border-radius:999px!important;
  background:currentColor!important;
  transition:transform .2s ease,opacity .2s ease!important;
}
.app-shell.sidebar-open .hamb span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.app-shell.sidebar-open .hamb span:nth-child(2){opacity:0}
.app-shell.sidebar-open .hamb span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mobile-native-dock{display:none}

/* Forms remain readable, but no longer waste a full phone screen per field. */
@media(max-width:760px){
  .app-shell .form-group{margin:9px 0!important}
  .app-shell .form-group>label:first-child{margin-bottom:6px!important;font-size:13px!important;line-height:1.2!important}
  .app-shell .input,.app-shell .select,.app-shell textarea,.app-shell select{
    min-height:44px!important;
    padding:9px 12px!important;
    border-radius:13px!important;
    font-size:15px!important;
  }
  .app-shell textarea.input,.app-shell textarea{min-height:86px!important}
  .app-shell .notice{
    position:relative!important;
    z-index:1!important;
    max-height:none!important;
    min-height:0!important;
    overflow:visible!important;
    white-space:normal!important;
    display:block!important;
    line-height:1.42!important;
    margin-bottom:12px!important;
  }
  .app-shell .card{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important}
}

@media(max-width:1100px){
  body.kinawa-premium-ui{padding:0!important}
  .app-shell .main,.app-shell .main.expanded,.app-shell.sidebar-hidden .main{
    min-height:100dvh!important;
    padding-top:calc(var(--kinawa-native-header) + var(--kinawa-safe-top))!important;
  }
  .app-shell .topbar{
    position:fixed!important;
    inset:0 0 auto 0!important;
    width:100%!important;
    max-width:100%!important;
    min-height:calc(var(--kinawa-native-header) + var(--kinawa-safe-top))!important;
    height:calc(var(--kinawa-native-header) + var(--kinawa-safe-top))!important;
    padding:calc(8px + var(--kinawa-safe-top)) 12px 8px!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
  }
  .app-shell .topbar-left{flex:1 1 auto!important;min-width:0!important;gap:10px!important}
  .app-shell .topbar-title{min-width:0!important;flex:1 1 auto!important}
  .app-shell .topbar-title strong{
    display:block!important;
    max-width:100%!important;
    font-size:17px!important;
    line-height:1.15!important;
    letter-spacing:-.015em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .app-shell .topbar-title p{display:none!important}
  .app-shell .hamb{
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    border-radius:15px!important;
    border:1px solid #d8e3ef!important;
    color:#143252!important;
    box-shadow:0 6px 18px rgba(15,23,42,.08)!important;
  }
  .app-shell .topbar-actions{flex:0 0 auto!important;gap:7px!important}
  .app-shell .server-pill,.app-shell .date-pill{display:none!important}
  .app-shell .bell-pill{
    display:inline-flex!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    border-radius:14px!important;
    background:#fff!important;
    border:1px solid #dbe5f1!important;
    box-shadow:0 5px 15px rgba(15,23,42,.07)!important;
  }
  .app-shell .bell-pill svg{width:18px!important;height:18px!important}
  .app-shell .userbox{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    padding:3px!important;
    border-radius:14px!important;
  }
  .app-shell .userbox>span:not(.avatar-dot){display:none!important}
  .app-shell .avatar-dot{width:32px!important;height:32px!important;min-width:32px!important}
  .app-shell .content{
    min-height:calc(100dvh - var(--kinawa-native-header))!important;
    padding-top:12px!important;
    padding-bottom:calc(var(--kinawa-native-dock) + var(--kinawa-safe-bottom) + 28px)!important;
  }
  .app-shell .footer{
    margin-bottom:calc(var(--kinawa-native-dock) + var(--kinawa-safe-bottom) + 12px)!important;
  }
  .mobile-native-dock{
    position:fixed;
    z-index:74;
    left:max(10px,env(safe-area-inset-left,0px));
    right:max(10px,env(safe-area-inset-right,0px));
    bottom:calc(8px + var(--kinawa-safe-bottom));
    min-height:var(--kinawa-native-dock);
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
    padding:6px;
    border:1px solid rgba(203,213,225,.78);
    border-radius:22px;
    background:rgba(255,255,255,.94);
    box-shadow:0 18px 48px rgba(15,23,42,.22);
    -webkit-backdrop-filter:blur(20px) saturate(145%);
    backdrop-filter:blur(20px) saturate(145%);
    transition:transform .22s ease,opacity .22s ease;
  }
  .mobile-native-dock.is-keyboard-open,
  .app-shell.sidebar-open .mobile-native-dock{
    transform:translateY(calc(100% + 30px));
    opacity:0;
    pointer-events:none;
  }
  .mobile-native-dock [data-native-dock-item]{
    appearance:none;
    border:0;
    min-width:0;
    min-height:52px;
    padding:5px 4px;
    border-radius:16px;
    background:transparent;
    color:#5b6d87;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font:inherit;
    font-size:10px;
    font-weight:850;
    line-height:1;
    cursor:pointer;
    touch-action:manipulation;
    overflow:hidden;
  }
  .mobile-native-dock [data-native-dock-item] svg{width:20px;height:20px;flex:0 0 auto}
  .mobile-native-dock [data-native-dock-item] span{
    display:block;
    width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:center;
  }
  .mobile-native-dock [data-native-dock-item]:active{transform:scale(.94);background:#eef4ff}
  .mobile-native-dock .native-dock-home{color:#3158d4}
  .mobile-native-dock .native-context-action{
    background:linear-gradient(135deg,#3d6cff,#3158d4)!important;
    color:#fff!important;
    box-shadow:0 7px 16px rgba(49,88,212,.26);
  }
  .mobile-native-dock .native-context-action[hidden]{display:none!important}
  .mobile-native-dock:not(.has-context-action){grid-template-columns:repeat(3,minmax(0,1fr))}
  .mobile-native-dock .native-context-action.is-dirty::after{
    content:'';
    position:absolute;
    width:7px;
    height:7px;
    margin:-30px 0 0 24px;
    border:2px solid #fff;
    border-radius:50%;
    background:#f59e0b;
  }
}

/* AI settings becomes a compact native accordion instead of seven giant cards. */
.page-ai_settings .ai-provider-grid{align-items:start!important}
.page-ai_settings details.ai-provider-card{padding:0!important;overflow:hidden!important}
.page-ai_settings .ai-provider-summary{
  list-style:none;
  min-height:62px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  user-select:none;
  background:linear-gradient(180deg,#fff,#f8fbff);
}
.page-ai_settings .ai-provider-summary::-webkit-details-marker{display:none}
.page-ai_settings .ai-provider-summary::marker{content:''}
.page-ai_settings .ai-provider-summary>span{min-width:0}
.page-ai_settings .ai-provider-summary strong{display:block;font-size:17px;line-height:1.15;color:#0b2144}
.page-ai_settings .ai-provider-summary small{display:block;margin-top:3px;font-size:11px;color:#71829b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-ai_settings .ai-provider-chevron{
  flex:0 0 34px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid #dbe5f1;
  border-radius:12px;
  background:#fff;
  transition:transform .2s ease;
}
.page-ai_settings details[open] .ai-provider-chevron{transform:rotate(180deg)}
.page-ai_settings .ai-provider-body{padding:2px 16px 16px;border-top:1px solid #edf2f7}
@media(max-width:760px){
  .page-ai_settings .ai-master-card .form-row{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .page-ai_settings .ai-master-card .form-group.col-3{grid-column:span 1!important}
  .page-ai_settings .ai-master-card .form-group.col-3:nth-child(-n+2){grid-column:1/-1!important}
  .page-ai_settings .ai-provider-grid{gap:10px!important}
  .page-ai_settings .ai-provider-summary{min-height:58px;padding:12px 14px}
  .page-ai_settings .ai-provider-body{padding:1px 14px 14px}
  .page-ai_settings form>.card:last-child{padding:10px!important}
  .page-ai_settings form>.card:last-child .btn{width:100%!important}
}

/* School identity page: form first, preview compact, no oversized blank sections. */
@media(max-width:760px){
  .page-school .school-layout{gap:10px!important}
  .page-school .school-layout>.card{margin-bottom:0!important}
  .page-school .school-layout form>.btn-primary{width:100%!important}
  .page-school .preview-card{text-align:center!important;padding:16px!important}
  .page-school .preview-card h3{font-size:21px!important;margin:0 0 10px!important}
  .page-school .preview-logo{width:min(180px,52vw)!important;height:auto!important;max-height:190px!important;object-fit:contain!important}
  .page-school .preview-card h4{margin:8px 0 2px!important}
  .page-school .preview-card p{margin:0!important}
}

@media(max-width:390px){
  :root{--kinawa-native-header:60px;--kinawa-native-dock:62px}
  .app-shell .topbar{padding-left:9px!important;padding-right:9px!important}
  .app-shell .hamb{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
  .app-shell .bell-pill{display:none!important}
  .app-shell .topbar-title strong{font-size:16px!important}
  .mobile-native-dock{left:7px;right:7px;bottom:calc(6px + var(--kinawa-safe-bottom));border-radius:20px}
  .mobile-native-dock [data-native-dock-item]{min-height:49px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .app-shell .topbar,.app-shell .hamb span,.mobile-native-dock,.page-ai_settings .ai-provider-chevron{transition:none!important}
}
@media print{
  .mobile-native-dock,.topbar-progress{display:none!important}
  .app-shell .main{padding-top:0!important}
}

/* Login and registration receive the same native visual language. */
.login-page.kinawa-native-auth{
  min-height:100dvh!important;
  padding:calc(18px + var(--kinawa-safe-top)) max(14px,env(safe-area-inset-right,0px)) calc(18px + var(--kinawa-safe-bottom)) max(14px,env(safe-area-inset-left,0px))!important;
  background:
    radial-gradient(circle at 16% 8%,rgba(61,108,255,.16),transparent 34%),
    radial-gradient(circle at 86% 84%,rgba(39,177,113,.12),transparent 32%),
    linear-gradient(155deg,#edf6ff,#f8fbff 52%,#eef8f4)!important;
}
.login-page.kinawa-native-auth .login-card{
  width:min(100%,480px)!important;
  border:1px solid rgba(203,213,225,.78)!important;
  border-radius:28px!important;
  padding:clamp(20px,5vw,32px)!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 28px 80px rgba(15,23,42,.16)!important;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.login-page.kinawa-native-auth .login-card h2{margin:0 0 8px!important;font-size:clamp(24px,6vw,32px)!important}
.login-page.kinawa-native-auth .login-logo{width:clamp(104px,30vw,136px)!important;height:clamp(104px,30vw,136px)!important;margin:2px auto 8px!important}
.login-page.kinawa-native-auth .btn-primary{min-height:48px!important;border-radius:15px!important}