/* Work panels in the game look (UI redesign v1): the school staff panel (school.html) and the owner's admin (admin.html).
   Loaded after their own styles together with adi-skin.css and game-ui.css (for .g-ribbon, .g-btn, .g-meter, .g-tile).
   Same language as the learner app — indigo backdrop, framed ivory window, ribbon titles, beveled buttons, gold for the
   main edge and selection — but calmer: no scene art, dense tables and forms stay plain and readable. */
body.panel{ background:var(--g-indigo-deep);color:var(--g-ink)}
body.panel::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(circle at 70% -10%,#24b8c32e,transparent 50%),radial-gradient(circle at 10% 110%,#7151b62a,transparent 45%),
 repeating-conic-gradient(from 22.5deg at 50% 50%,#ffffff05 0 12.5%,transparent 0 25%) 0 0/120px 120px,linear-gradient(180deg,var(--g-indigo-deep),var(--g-indigo) 50%,var(--g-indigo-deep))}


/* ---------- side navigation: indigo column, gold inner edge, turquoise socket for the current page ---------- */
body.panel #sidebar,body.panel #admin-nav{background:linear-gradient(180deg,#1d4686,var(--g-indigo-deep))!important;border:0!important;border-inline-start:3px solid var(--g-gold)!important;box-shadow:-8px 0 26px #0007!important;color:var(--g-accent-soft)}
body.panel #sidebar .tag,body.panel #sidebar .nav-title,body.panel #admin-nav>b{color:var(--g-gold-soft)!important}
body.panel #sidebar nav button,body.panel #admin-menu button{color:var(--g-accent-soft)!important;background:transparent!important;border:0!important;border-radius:14px!important;box-shadow:none!important}
body.panel #sidebar nav button:hover,body.panel #admin-menu button:hover{background:#ffffff14!important}
body.panel #sidebar nav button.active,body.panel #admin-menu button.active{background:linear-gradient(180deg,var(--g-blue-hi),#1e5fa8)!important;color:var(--g-content)!important;box-shadow:inset 0 0 0 2px var(--g-gold),0 0 12px #24b8c366!important}
body.panel #sidebar .ic svg{stroke:currentColor}
body.panel #sidebar .login-exit,body.panel .admin-back{background:#ffffff14!important;color:var(--g-gold-soft)!important;border:1px solid #e9b24c88!important}
body.panel #sidebar .aside-end{background:#ffffff10!important;border:1px solid #ffffff22!important;color:#dce8ff}
@media (max-width:767px){body.panel #sidebar{border-inline-start:0!important;border-top:3px solid var(--g-gold)!important}}

/* ---------- header: the page's place and role as HUD pills ---------- */
body.panel .top .crumb,body.panel .top h1,body.panel #admin-title{color:var(--g-content)}
body.panel .top .crumb a{color:var(--g-gold-soft)}
body.panel .top .stats>*,body.panel .top .stats .card{box-sizing:border-box;border-style:solid!important;border-width:0 26px!important;border-image-source:var(--skin-hud)!important;border-image-slice:var(--skin-hud-slice)!important;background:transparent!important;box-shadow:none!important;color:var(--g-content)!important;border-radius:0!important}
body.panel .top .stats *{color:var(--g-content)}

/* ---------- the working area is one framed window ---------- */
body.panel #app,body.panel #admin-app{position:relative;isolation:isolate;box-sizing:border-box;margin:30px 0 20px;padding:20px clamp(6px,1.6vw,24px) 18px;
 border-style:solid;border-width:26px;border-image-source:var(--skin-window);border-image-slice:var(--skin-window-slice);border-image-width:40px;border-image-outset:6px}
body.panel #app::before,body.panel #admin-app::before{content:"";position:absolute;inset:-14px;z-index:-1;border-radius:18px;background:var(--g-content)}
body.panel .g-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin:-104px 0 14px}
body.panel .g-head .g-sub{color:var(--g-muted)}
body.panel .g-head-extra{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
body.panel .g-ribbon{width:min(420px,96%)}
body.panel #app .card,body.panel #admin-app .card,body.panel #app .class-card{background:var(--g-content);border:1px solid var(--g-line);border-radius:14px;box-shadow:none}
body.panel #app h2,body.panel #app h3,body.panel #admin-app h2,body.panel #admin-app h3{color:var(--g-indigo)}
body.panel #app .tiles>.card strong,body.panel #app .tiles>.card b{color:var(--g-indigo)}
body.panel #app table th,body.panel #admin-app table th{background:#fbf2de;color:var(--g-indigo)}
body.panel #app .notice,body.panel #admin-app .notice{border-radius:14px}
@media (max-width:767px){body.panel #app,body.panel #admin-app{margin-top:40px;border-width:16px;border-image-width:28px;border-image-outset:3px;padding:12px 2px}body.panel .g-head{margin-top:-80px}}

/* ---------- buttons: beveled; green main action, blue second, ivory quiet, maroon for leaving or deleting ---------- */
body.panel .btn{--b:var(--g-blue);--b-hi:var(--g-blue-hi);--b-edge:var(--g-blue-edge);min-height:42px;border:1px solid #ffffff55;border-radius:14px;background:linear-gradient(180deg,var(--b-hi),var(--b));box-shadow:0 4px 0 var(--b-edge),inset 0 2px 0 #ffffff40;color:var(--g-content);font-weight:800;text-shadow:0 1px 1px #0005;transition:transform .12s,box-shadow .12s}
body.panel .btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 var(--b-edge)}
body.panel .btn.green{--b:var(--g-green);--b-hi:var(--g-green-hi);--b-edge:var(--g-green-edge)}
body.panel .btn.red{--b:var(--g-maroon);--b-hi:#9a4252;--b-edge:var(--g-maroon-edge)}
body.panel .btn.secondary{--b:var(--g-amber-bg);--b-hi:var(--g-content);--b-edge:#d9bf8c;color:var(--g-blue-edge);text-shadow:none;border-color:var(--g-frame)}
body.panel .btn.small{min-height:36px;border-radius:11px}
body.panel .btn:disabled,body.panel .btn[disabled]{background:var(--g-disabled);color:var(--g-disabled-ink);box-shadow:0 3px 0 #8996a7;text-shadow:none}
body.panel .link,body.panel .mini{color:var(--g-blue-edge);font-weight:700}

/* ---------- tabs and chips ---------- */
body.panel .tabs{display:flex;gap:6px;padding:5px;border-radius:16px;background:var(--g-indigo-deep);border:2px solid var(--g-gold);overflow-x:auto}
body.panel .tabs button{flex:1 0 auto;min-height:42px;padding:6px 14px;border:0;border-radius:12px;background:transparent;color:#dce8ff;font-weight:800;white-space:nowrap}
body.panel .tabs button.active,body.panel .tabs button[aria-selected=true],body.panel .chip.on:not(.plus):not(.minus),body.panel .admin-chips button.active{background:var(--g-select-fill);color:var(--g-select-ink);border-color:var(--g-gold);box-shadow:inset 0 0 0 2px var(--g-gold)}


/* ---------- modal as a window ---------- */
body.panel .modal-wrap{background:#081833b3;backdrop-filter:blur(4px)}
body.panel .modal{position:relative;isolation:isolate;overflow:auto;background:transparent;border-radius:0;box-shadow:none;border-style:solid;border-width:24px;border-image-source:var(--skin-window);border-image-slice:var(--skin-window-slice);border-image-width:38px;border-image-outset:6px}
body.panel .modal{background:var(--g-content) border-box;border-radius:26px}
body.panel .modal .close{position:absolute;top:2px;left:2px;z-index:2;float:none;margin:0;width:var(--g-close-size);height:var(--g-close-size);padding:0;display:grid;place-items:center;border-radius:50%;border:3px solid var(--g-gold);background:linear-gradient(180deg,var(--g-blue-hi),var(--g-blue-edge));color:var(--g-on-dark);font-size:22px;line-height:1;box-shadow:0 3px 0 var(--g-navy-ink)}
body.panel .modal h2{color:var(--g-indigo)}
body.panel .g-ribbon,body.panel .g-ribbon span{color:var(--g-content)!important}
body.panel .top{height:auto!important;min-height:0!important;padding-top:14px!important;margin-bottom:8px!important;align-items:center!important}
body.panel .admin-nav-title{color:var(--g-gold-soft)}
@media (max-width:767px){body.panel #admin-nav{border-inline-start:0!important;border-bottom:3px solid var(--g-gold)!important}body.panel .admin-nav-title{display:none}}
.cr-item{margin-top:12px}.cr-item h3{margin:0}.cr-snapshot{margin:8px 0;padding:8px 12px;border-inline-start:3px solid #b98be0;background:#f8f4fd;border-radius:8px;white-space:pre-wrap}.cr-actions{gap:8px;align-items:end;margin-top:8px}.cr-days{display:inline-flex;gap:6px;align-items:center;font-size:13px}.cr-tabs{gap:8px;margin-bottom:8px}
/* Notification bell for staff (public/notify.js). */
body.panel .staff-bell{width:44px;height:44px;border-radius:50%;border:3px solid var(--g-gold);background:radial-gradient(circle at 50% 35%,var(--g-blue-hi) 0,var(--g-blue-edge) 80%);box-shadow:0 3px 0 var(--g-navy-ink);padding:0;margin-inline-end:6px}
body.panel .staff-bell svg{width:24px;height:24px;fill:#ffe6a8;stroke:#7a4b12;stroke-width:1.4}
body.panel .staff-bell .adi-badge{position:absolute;top:-6px;left:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--g-badge);color:var(--g-content);font-style:normal;font-size:12px;font-weight:800;line-height:20px}
body.panel .notif-item{display:grid;gap:3px;width:100%;text-align:right;padding:10px 12px;border-radius:10px;border:1px solid #dbe4ef;background:var(--g-content);font:inherit;cursor:pointer}
body.panel .notif-item.unread{background:var(--g-accent-soft);border-color:var(--g-accent)}
body.panel .notif-items{list-style:none;margin:0;padding:0;display:grid;gap:8px}body.panel .notif-item small{color:var(--g-muted)}body.panel .notif-item small i{font-style:normal;color:var(--g-bad)}

/* «پیشنهاد هوش، تأیید انسان» (AI grading suggestion box and label) */
.ai-box{border:1px dashed var(--g-accent);border-radius:12px;padding:10px 12px;margin-top:8px;background:var(--g-accent-soft);color:var(--g-ink);line-height:1.9}.ai-box ul{margin:4px 0;padding-inline-start:18px}.ai-box small{display:block;color:var(--g-muted)}.ai-box .row{gap:8px;margin-top:6px}.badge.ai-label{background:var(--g-accent-soft);color:var(--g-accent-ink)}

/* Toast in the calm panel skin: white card, indigo text, a coloured edge; above windows (z 90) and the phone nav bar. */
body.panel #messages{position:fixed;inset:auto 0 0;z-index:90;display:flex;justify-content:center;pointer-events:none}
body.panel .toast{position:static;margin:0 12px 22px;max-width:min(520px,calc(100vw - 24px));padding:12px 16px;border-radius:14px;border:1px solid var(--g-line);border-inline-start:8px solid var(--g-good);background:var(--g-content);color:var(--g-ink);font-size:14px;font-weight:700;line-height:1.7;box-shadow:0 10px 26px #10284f40;pointer-events:auto}
body.panel .toast.error{border-inline-start-color:var(--g-bad);color:#7a2230;background:#fff7f8}
@media (max-width:767px){body.panel .toast{margin-bottom:calc(84px + env(safe-area-inset-bottom))}}

/* Admin messages (flash() in admin.js → #admin-alert): the same card as the toast, in the page flow above the section. */
.admin-success,.admin-error{margin:0 0 14px;padding:12px 16px;border-radius:14px;border:1px solid var(--g-line,var(--g-line));border-inline-start:8px solid var(--g-good,var(--g-good));background:var(--g-content);color:var(--g-ink,var(--g-ink));font-size:14px;font-weight:700;line-height:1.7;box-shadow:0 4px 14px #10284f1f}
.admin-error{border-inline-start-color:var(--g-bad,var(--g-bad));background:#fff7f8;color:#7a2230}

button[aria-busy=true],button[aria-busy=true]:disabled{cursor:progress;opacity:1;animation:g-busy 1s ease-in-out infinite alternate}
@keyframes g-busy{from{opacity:1}to{opacity:.6}}