/* ส่วนเสริมของหน้าแอปหลัก (เมนูชีท · ช่องแก้ไข · loading) */
.loading{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 88%,transparent);display:grid;place-content:center;justify-items:center;gap:.6rem;z-index:40}
.loading[hidden]{display:none}
.spin{width:34px;height:34px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--brand);animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
#nav .navitem small{color:var(--muted);margin-left:.35rem}
#nav .navitem.todo{opacity:.55}
.sheet-head .hint{color:var(--muted);font-size:.9rem}
.tools select.docsel{max-width:260px;padding:.3rem;border-radius:8px;border:1px solid var(--line);background:var(--panel)}
table.xl td.sel{box-shadow:inset 0 0 0 2px var(--brand)}
.pv-bar-empty{display:none}
@media (max-width:820px){
  .icon{display:inline-block}
  #nav{position:fixed;left:0;top:52px;bottom:0;z-index:30;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow)}
  body.navopen #nav{transform:none}
  .brand{font-size:.95rem}
}

/* ระดับในปุ่มประเมิน และสีเกรดในตารางคะแนน */
.pc.l0{background:var(--lv0bg);color:var(--lv0);border-color:transparent;font-weight:700}
.pc.l1{background:var(--lv1bg);color:var(--lv1);border-color:transparent;font-weight:700}
.pc.l2{background:var(--lv2bg);color:var(--lv2);border-color:transparent;font-weight:700}
.pc.l3{background:var(--lv3bg);color:var(--lv3);border-color:transparent;font-weight:700}
table.sheet td.ro.gok{background:var(--lv3bg);color:var(--lv3);font-weight:700}
table.sheet td.ro.gmid{background:var(--lv2bg);color:var(--lv2);font-weight:700}
table.sheet td.ro.gbad{background:var(--lv0bg);color:var(--lv0);font-weight:700}
.docviewer .sheet-head h2{flex:none}

/* ปฏิทินวันเรียน */
.months{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-bottom:12px}
.mcard{margin:0}
.mcard .cdh,.mcard .cdg{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:6px}
.mcard .cdh i{font-style:normal;font-size:.75rem;color:var(--muted);text-align:center}
.mcard .cd{border:1px solid var(--line);background:var(--bg);border-radius:8px;min-height:34px;cursor:pointer;font-size:.92rem;color:var(--muted)}
.mcard .cd.we{opacity:.6}
.mcard .cd.on{background:var(--lv3bg);color:var(--lv3);border-color:transparent;font-weight:700;opacity:1}
.mcard .cd:hover{border-color:var(--brand)}
.mcard .blank{min-height:34px}
/* เช็คเวลาเรียน */
table.att th.dh{min-width:34px;cursor:pointer;font-size:.8rem}
table.att td.gtd .pc{min-width:34px;min-height:34px;font-size:.95rem;border-radius:6px;padding:0}
table.att th small{font-weight:400}

/* เวลาเรียนรายวิชา */
table.att th.dh.off{background:#d1d5db;color:#6b7280}
table.att td.offc{background:repeating-linear-gradient(45deg,#e5e7eb,#e5e7eb 4px,#f3f4f6 4px,#f3f4f6 8px)}
table.sheet td.ro.gbad{background:var(--lv0bg);color:var(--lv0);font-weight:700}
.tw table th.we{opacity:.65}
table.att td.okc{background:var(--lv3bg);color:var(--lv3);text-align:center;min-width:34px}
table.att td.noc{background:#fee2e2;color:var(--err);font-weight:700;text-align:center}
table.att td.blc{background:var(--bg)}
table.att td .pc.ovr{outline:2px dashed var(--brand);outline-offset:-3px}
table.att td .pc.part{background:#fef3c7;color:#92400e;border-color:transparent;font-weight:700}