/*
 * YENTUMI Gradebook Enterprise — Platform Polish 2026.08.27.019
 * Dark-mode parity, installed-app login hub, refresh controls and native
 * desktop Window Controls Overlay integration.
 */

:root{
  --gb-platform-bg:#f4f7fb;
  --gb-platform-surface:#ffffff;
  --gb-platform-surface-2:#f8fafc;
  --gb-platform-line:#dce4ee;
  --gb-platform-text:#13233b;
  --gb-platform-muted:#687b91;
  --gb-platform-blue:#2563eb;
  --gb-platform-blue-soft:#eef5ff;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --gb-platform-bg:#081321;
  --gb-platform-surface:#101d2d;
  --gb-platform-surface-2:#142337;
  --gb-platform-line:#2d425a;
  --gb-platform-text:#edf4fb;
  --gb-platform-muted:#9fb0c5;
  --gb-platform-blue:#4f8cff;
  --gb-platform-blue-soft:#12294a;
}

/* ---------------- authenticated platform + school portals ---------------- */
body.enterprise-shell-platform{
  --gb-bg:var(--gb-platform-bg);
  --gb-surface:var(--gb-platform-surface);
  --gb-surface-raised:var(--gb-platform-surface-2);
  --gb-surface-soft:var(--gb-platform-surface-2);
  --gb-line:var(--gb-platform-line);
  --gb-line-strong:color-mix(in srgb,var(--gb-platform-line) 75%,#fff);
  --gb-text:var(--gb-platform-text);
  --gb-muted:var(--gb-platform-muted);
}
html[data-theme="dark"] body.enterprise-shell-v3{
  background:var(--gb-bg,var(--gb-platform-bg))!important;
  color:var(--gb-text,var(--gb-platform-text))!important;
}
html[data-theme="dark"] body.enterprise-shell-v3>.shell,
html[data-theme="dark"] body.enterprise-shell-v3 main.shell{
  background:var(--gb-bg,var(--gb-platform-bg))!important;
  color:var(--gb-text,var(--gb-platform-text))!important;
}
html[data-theme="dark"] body.enterprise-shell-v3 .app-header{
  background:#101d2d!important;
  border-bottom-color:#2d425a!important;
  box-shadow:0 3px 16px rgba(0,0,0,.24)!important;
  color:#edf4fb!important;
}
html[data-theme="dark"] body.enterprise-shell-platform .enterprise-platform-context,
html[data-theme="dark"] body.enterprise-shell-platform .enterprise-platform-context b{color:#edf4fb!important}
html[data-theme="dark"] body.enterprise-shell-platform .enterprise-platform-context small{color:#9fb0c5!important}

/* General dark surfaces. */
html[data-theme="dark"] body.enterprise-shell-v3 :is(
  .panel,.confirm-card,.settings-card,.student360-card,.student360-section,
  .academic-ops-card,.academic-ops-hero,.cc-card,.cc-panel,.teacher-mobile-card,
  .interface-preview-panel,.interface-preview-note
){
  background:var(--gb-surface,var(--gb-platform-surface))!important;
  border-color:var(--gb-line,var(--gb-platform-line))!important;
  color:var(--gb-text,var(--gb-platform-text))!important;
  box-shadow:0 10px 30px rgba(0,0,0,.16)!important;
}
html[data-theme="dark"] body.enterprise-shell-v3 :is(h1,h2,h3,h4,strong,b,label,legend){
  color:var(--gb-text,var(--gb-platform-text));
}
html[data-theme="dark"] body.enterprise-shell-v3 :is(.muted,small,.hint,.help-text){
  color:var(--gb-muted,var(--gb-platform-muted))!important;
}
html[data-theme="dark"] body.enterprise-shell-v3 :is(input,select,textarea){
  background:#0d1928!important;
  color:#edf4fb!important;
  border-color:#38506a!important;
}
html[data-theme="dark"] body.enterprise-shell-v3 :is(input,textarea)::placeholder{color:#71869e!important}
html[data-theme="dark"] body.enterprise-shell-v3 :is(fieldset,.table-wrap){border-color:#2d425a!important}
html[data-theme="dark"] body.enterprise-shell-v3 table{background:#101d2d!important;color:#edf4fb!important}
html[data-theme="dark"] body.enterprise-shell-v3 th{background:#15263a!important;color:#b7c5d7!important;border-color:#2d425a!important}
html[data-theme="dark"] body.enterprise-shell-v3 td{background:#101d2d!important;color:#e6eef8!important;border-color:#283d54!important}
html[data-theme="dark"] body.enterprise-shell-v3 tbody tr:hover td{background:#15263a!important}

/* Main System Admin dashboard: remove white cards / white text collision. */
html[data-theme="dark"] body.enterprise-shell-platform .admin-metric-grid article{
  background:#101d2d!important;
  border:1px solid #2d425a!important;
  box-shadow:0 10px 26px rgba(0,0,0,.16)!important;
}
html[data-theme="dark"] body.enterprise-shell-platform .admin-metric-grid article small{color:#9fb0c5!important}
html[data-theme="dark"] body.enterprise-shell-platform .admin-metric-grid article strong{color:#f4f8fc!important}
html[data-theme="dark"] body.enterprise-shell-platform .admin-metric-icon{
  background:#142d50!important;color:#7eabff!important
}
html[data-theme="dark"] body.enterprise-shell-platform .admin-dashboard-panels>.panel{
  background:#101d2d!important;border-color:#2d425a!important
}
html[data-theme="dark"] body.enterprise-shell-platform .admin-operation-list a,
html[data-theme="dark"] body.enterprise-shell-platform .admin-plan-list>div{
  background:#142337!important;
  border:1px solid #2d425a!important;
  color:#eaf2fb!important;
}
html[data-theme="dark"] body.enterprise-shell-platform .admin-operation-list a span,
html[data-theme="dark"] body.enterprise-shell-platform .admin-plan-list span{color:#b4c3d5!important}
html[data-theme="dark"] body.enterprise-shell-platform .admin-operation-list a b,
html[data-theme="dark"] body.enterprise-shell-platform .admin-plan-list b{color:#f4f8fc!important}

/* Legacy hard-coded white school-admin panels. */
html[data-theme="dark"] body.enterprise-shell-school :is(
  .parent-broadcast-compose,.parent-broadcast-recent,.parent-broadcast-admin-card
){
  background:#101d2d!important;border-color:#2d425a!important;color:#edf4fb!important
}
html[data-theme="dark"] body.enterprise-shell-school .parent-broadcast-admin-card h3{color:#edf4fb!important}
html[data-theme="dark"] body.enterprise-shell-school .parent-broadcast-admin-body{color:#b6c5d7!important}

/* User popover parity. */
html[data-theme="dark"] body.enterprise-shell-v3 .enterprise-user-popover{
  background:#101d2d!important;border-color:#30465f!important;color:#edf4fb!important
}
html[data-theme="dark"] body.enterprise-shell-v3 .enterprise-user-action{
  color:#edf4fb!important
}
html[data-theme="dark"] body.enterprise-shell-v3 .enterprise-user-action:hover{
  background:#17283d!important
}
html[data-theme="dark"] body.enterprise-shell-v3 .enterprise-user-action small{color:#98abc1!important}

/* ---------------- installed-app refresh controls ---------------- */
.pwa-installed-only{display:none!important}
html.gradebook-installed-app .pwa-installed-only{display:flex!important}
@media (display-mode:standalone),(display-mode:window-controls-overlay){
  .pwa-installed-only{display:flex!important}
}
.pwa-refresh-control{
  width:42px;height:42px;min-width:42px!important;min-height:42px!important;
  padding:0!important;border:1px solid var(--gb-line,#dce4ee)!important;
  border-radius:13px!important;background:var(--gb-surface,#fff)!important;
  color:var(--gb-text,#17243d)!important;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:none!important
}
.pwa-refresh-control svg,.pwa-refresh-menu svg,.pwa-auth-refresh svg{width:20px;height:20px}
.pwa-refresh-control:hover{background:var(--gb-surface-soft,#f5f8fc)!important}
.pwa-refresh-control.is-refreshing svg,
.pwa-refresh-menu.is-refreshing svg,
.pwa-auth-refresh.is-refreshing svg{animation:gb-refresh-spin .65s linear infinite}
@keyframes gb-refresh-spin{to{transform:rotate(360deg)}}
html[data-theme="dark"] .pwa-refresh-control{
  background:#101d2d!important;border-color:#30465f!important;color:#eaf2fb!important
}
.pwa-refresh-menu{width:100%;border:0;background:transparent;text-align:left;font:inherit;cursor:pointer}

/* Desktop gets a quick refresh button in the app header. Phone keeps header
   uncluttered and exposes Refresh inside the Account menu. */
@media(max-width:800px){body.enterprise-shell-v3 .pwa-refresh-control{display:none!important}}
@media(min-width:801px){
  body.enterprise-shell-v3 .pwa-refresh-control{margin-left:auto}
  body.enterprise-shell-v3 .enterprise-platform-context+.pwa-refresh-control,
  body.enterprise-shell-v3 .enterprise-period-context+.pwa-refresh-control,
  body.enterprise-shell-v3 .enterprise-header-spacer+.pwa-refresh-control{margin-left:auto}
}

/* ---------------- public/installed login hub ---------------- */
body.pwa-auth-page{
  min-height:100dvh;
  background:
    radial-gradient(circle at 15% 0%,rgba(37,99,235,.07),transparent 34rem),
    var(--gb-platform-bg)!important;
  color:var(--gb-platform-text)!important;
}
body.pwa-auth-page .auth-card{
  position:relative;
  width:min(100% - 32px,540px)!important;
  margin:22px auto!important;
  padding:30px!important;
  border:1px solid var(--gb-platform-line)!important;
  border-radius:22px!important;
  background:var(--gb-platform-surface)!important;
  box-shadow:0 20px 55px rgba(25,48,78,.10)!important;
  color:var(--gb-platform-text)!important;
}
body.pwa-auth-page .auth-card h2{margin-bottom:7px!important;color:var(--gb-platform-text)!important}
body.pwa-auth-page .auth-card>p{color:var(--gb-platform-muted)!important;margin-bottom:18px!important}
body.pwa-auth-page .auth-card label{color:var(--gb-platform-text)!important}
body.pwa-auth-page .auth-card input{
  background:var(--gb-platform-surface-2)!important;
  color:var(--gb-platform-text)!important;
  border-color:var(--gb-platform-line)!important;
}
body.pwa-auth-page .auth-card button:not(.password-toggle){min-height:48px;border-radius:12px}
body.pwa-auth-page .site-footer{color:var(--gb-platform-muted)!important}

.pwa-auth-portal-switch{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 22px
}
.pwa-auth-portal{
  min-width:0;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;
  gap:10px;padding:13px;border:1px solid var(--gb-platform-line);border-radius:14px;
  background:var(--gb-platform-surface-2);color:var(--gb-platform-text);text-decoration:none!important
}
.pwa-auth-portal>span{
  width:38px;height:38px;display:grid;place-items:center;border-radius:11px;
  background:var(--gb-platform-blue-soft);color:var(--gb-platform-blue);font-weight:900
}
.pwa-auth-portal div{min-width:0}.pwa-auth-portal b{display:block;font-size:13px;color:inherit}
.pwa-auth-portal small{display:block;margin-top:2px;color:var(--gb-platform-muted);font-size:10px;line-height:1.35}
.pwa-auth-portal strong{display:none}
.pwa-auth-portal.active{border-color:color-mix(in srgb,var(--gb-platform-blue) 35%,var(--gb-platform-line))}
.pwa-auth-portal[href]:hover{
  border-color:var(--gb-platform-blue);background:color-mix(in srgb,var(--gb-platform-blue) 7%,var(--gb-platform-surface))
}
.pwa-auth-refresh{
  position:fixed;z-index:20;right:18px;top:max(18px,env(safe-area-inset-top));
  min-height:42px;padding:0 13px;border:1px solid var(--gb-platform-line);border-radius:999px;
  background:var(--gb-platform-surface);color:var(--gb-platform-text);align-items:center;gap:7px;
  box-shadow:0 10px 28px rgba(15,35,60,.10);font:750 12px/1 inherit
}
html[data-theme="dark"] body.pwa-auth-page .auth-card{
  background:#101d2d!important;border-color:#2d425a!important;box-shadow:0 24px 70px rgba(0,0,0,.30)!important
}
html[data-theme="dark"] body.pwa-auth-page .auth-card input{
  background:#0b1725!important;border-color:#38506a!important;color:#edf4fb!important
}
html[data-theme="dark"] body.pwa-auth-page .pwa-auth-portal{
  background:#142337;border-color:#30465f;color:#edf4fb
}
html[data-theme="dark"] body.pwa-auth-page .pwa-auth-refresh{
  background:#101d2d;border-color:#30465f;color:#edf4fb
}

/* ---------------- desktop PWA native window controls ----------------
   Gradebook does NOT draw fake caption buttons. Chromium/OS retains native
   Minimize, Maximize/Restore and Close controls. The application header uses
   only the title-bar area left available by Window Controls Overlay. */
@media (display-mode:window-controls-overlay) and (min-width:801px){
  body.enterprise-shell-v3 .app-header{
    min-height:max(58px,env(titlebar-area-height,48px))!important;
    height:max(58px,env(titlebar-area-height,48px))!important;
    padding-right:max(
      18px,
      calc(100vw - env(titlebar-area-x,0px) - env(titlebar-area-width,100vw) + 12px)
    )!important;
    -webkit-app-region:drag;
    app-region:drag;
  }
  body.enterprise-shell-v3 .app-header :is(button,a,summary,details,input){
    -webkit-app-region:no-drag;
    app-region:no-drag;
  }
}

/* Mobile OS owns app lifecycle: no fake close/minimize/maximize controls. */
@media(max-width:800px){
  .pwa-auth-portal-switch{grid-template-columns:1fr}
  .pwa-auth-portal[href]{grid-template-columns:38px minmax(0,1fr) auto}
  .pwa-auth-portal strong{display:block;color:var(--gb-platform-blue);font-size:11px}
  body.pwa-auth-page .auth-card{width:calc(100% - 24px)!important;margin:14px auto!important;padding:20px!important}
  .pwa-auth-refresh{right:10px;top:max(10px,env(safe-area-inset-top));padding:0;width:44px;justify-content:center}
  .pwa-auth-refresh span{display:none}
}

@media(prefers-reduced-motion:reduce){
  .pwa-refresh-control.is-refreshing svg,
  .pwa-refresh-menu.is-refreshing svg,
  .pwa-auth-refresh.is-refreshing svg{animation-duration:1.4s}
}