/* Общий слой оформления кабинетов: панели, кнопки, поля, плитки, заметки.
   Подключается перед cabinet.css / teacher.css, чтобы страницы могли что-то переопределить. */

:root{
  --e1:0 1px 2px rgba(60,40,20,.05);
  --e2:0 1px 2px rgba(60,40,20,.05), 0 8px 24px rgba(60,40,20,.06);
  --e3:0 2px 4px rgba(60,40,20,.06), 0 18px 40px rgba(60,40,20,.10);
  --u:var(--accent); --u-soft:var(--accent-soft);
  --r-lg:20px; --r-md:14px; --r-sm:10px;
}
:root[data-theme="dark"]{
  --e1:0 1px 2px rgba(0,0,0,.5);
  --e2:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35);
  --e3:0 2px 4px rgba(0,0,0,.5), 0 18px 40px rgba(0,0,0,.45);
}

/* ---------- каркас страницы ---------- */
.wrap{max-width:64rem;margin:0 auto;padding:1.2rem 1.1rem 4rem}
.cab-hero{display:flex;align-items:center;gap:1rem;margin:.6rem 0 1.4rem}
.cab-hero .avatar{flex:none}
.hero-t{min-width:0}
.cab-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,4.4vw,2.3rem);
  margin:0;letter-spacing:-.02em;line-height:1.1}
.cab-hero .sub{color:var(--muted);font-size:.9rem;margin-top:.2rem}
.cab-hero .hero-side{margin-left:auto;display:flex;gap:.45rem;flex-wrap:wrap;justify-content:flex-end}

.avatar{width:3.2rem;height:3.2rem;border-radius:50%;display:grid;place-items:center;
  background:var(--u-soft);color:var(--u);font-weight:700;font-size:1.25rem;
  font-family:var(--serif);letter-spacing:.01em;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--u) 18%,transparent)}
.avatar.sm{width:2.3rem;height:2.3rem;font-size:.95rem}

/* ---------- панель ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--e2);margin-bottom:1rem;overflow:hidden;padding:1rem 1.1rem}
.panel:has(.p-head){padding:0}
/* панели старого вида: заголовок h2 оформляем так же, как новую шапку */
.panel>h2{font-family:var(--serif);font-weight:600;font-size:1.06rem;margin:0 0 .75rem;
  letter-spacing:-.01em;line-height:1.25;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.panel>h2 small{display:block;font-family:var(--sans);font-weight:400;font-size:.79rem;
  color:var(--muted);margin:.15rem 0 0;letter-spacing:0}
.p-head{display:flex;align-items:center;gap:.7rem;padding:.95rem 1.1rem;
  border-bottom:1px solid var(--line)}
.p-head .ic{flex:none;width:2rem;height:2rem;border-radius:9px;display:grid;place-items:center;
  background:var(--u-soft);font-size:1rem;line-height:1}
.p-head .tt{min-width:0;flex:1}
.p-head h2{font-family:var(--serif);font-weight:600;font-size:1.06rem;margin:0;letter-spacing:-.01em;line-height:1.25}
.p-head .hint{color:var(--muted);font-size:.79rem;line-height:1.35;margin-top:.05rem}
.p-head .act{margin-left:auto;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.p-body{padding:1rem 1.1rem}
.p-body.tight{padding:.4rem 1.1rem .8rem}
.p-body.flush{padding:0 1.1rem}
.panel.quiet{box-shadow:var(--e1);background:color-mix(in srgb,var(--card) 60%,var(--paper))}
.panel.accent{border-color:color-mix(in srgb,var(--u) 35%,var(--line))}
.panel.accent .p-head{background:linear-gradient(180deg,var(--u-soft),transparent)}

/* ---------- кнопки ---------- */
.btn{border:1px solid var(--u);background:var(--u);color:#fff;border-radius:var(--r-md);
  padding:.55rem 1rem;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;white-space:nowrap;
  transition:filter .14s,transform .1s,background .14s,border-color .14s}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:default;transform:none;filter:none}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--u);color:var(--u);background:var(--u-soft);filter:none}
.btn.quiet{background:transparent;border-color:transparent;color:var(--muted);font-weight:500}
.btn.quiet:hover{color:var(--u);background:var(--u-soft);filter:none}
.btn.danger{background:transparent;border-color:var(--line);color:#b4402f}
.btn.danger:hover{background:#fdeeea;border-color:#e6b8ac;filter:none}
.btn.sm{padding:.38rem .7rem;font-size:.82rem;border-radius:var(--r-sm)}
.btn.lg{padding:.7rem 1.25rem;font-size:.98rem}
.btn.block{width:100%;justify-content:center}

/* ---------- поля ---------- */
.fld,.p-body input[type=text],.p-body input[type=number],.p-body input[type=datetime-local],
.p-body select,.p-body textarea{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);color:var(--ink);
  font:inherit;font-size:.92rem;padding:.55rem .7rem;transition:border-color .14s,box-shadow .14s}
.p-body textarea{width:100%;min-height:5rem;line-height:1.5;resize:vertical}
.fld:focus,.p-body input:focus,.p-body select:focus,.p-body textarea:focus{
  outline:none;border-color:var(--u);box-shadow:0 0 0 3px color-mix(in srgb,var(--u) 14%,transparent)}
.field-row{display:grid;gap:.35rem;margin-bottom:.7rem}
.field-row>label{font-size:.78rem;color:var(--muted);font-weight:600;letter-spacing:.01em}
.inline{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

/* ---------- метки и плашки ---------- */
.badge{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--u-soft);color:var(--u);border-radius:999px;padding:.16rem .5rem;white-space:nowrap}
.badge.ok{background:var(--ok-soft);color:var(--ok)}
.badge.grey{background:var(--line);color:var(--muted)}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:.8rem;letter-spacing:.08em;
  background:var(--u-soft);color:var(--u);border-radius:8px;padding:.18rem .5rem}

/* ---------- плитки-показатели ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.6rem}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:.7rem .8rem}
.stat b{display:block;font-family:var(--serif);font-size:1.5rem;font-weight:600;line-height:1.1}
.stat small{color:var(--muted);font-size:.76rem;display:block;margin-top:.15rem}
.stat.warn b{color:var(--u)}

/* ---------- список строк ---------- */
.list{display:grid}
.urow{display:flex;align-items:center;gap:.8rem;padding:.75rem 0;border-top:1px solid var(--line);
  text-align:left;background:none;border-left:0;border-right:0;border-bottom:0;font:inherit;color:inherit;width:100%}
.urow:first-child{border-top:0}
.urow.click{cursor:pointer}
.urow.click:hover .nm{color:var(--u)}
.urow .grow{text-align:left}
.urow .nm{font-weight:600;font-size:.98rem;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:flex-start}
.urow .meta{font-size:.79rem;color:var(--muted);margin-top:.1rem}
.urow .grow{flex:1;min-width:0}
.urow .tail{margin-left:auto;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}

/* ---------- пустое состояние ---------- */
.empty{color:var(--muted);font-size:.88rem}
.blank{text-align:center;padding:1.5rem .8rem;color:var(--muted)}
.blank .bi{font-size:1.7rem;display:block;margin-bottom:.35rem;opacity:.7}
.blank b{display:block;color:var(--ink);font-size:.95rem;margin-bottom:.15rem}
.blank small{font-size:.83rem;line-height:1.45;display:block}

/* ---------- сегментированный переключатель ---------- */
.seg{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.2rem;gap:.15rem}
.seg button{border:0;background:none;color:var(--muted);font:inherit;font-size:.82rem;font-weight:600;
  padding:.32rem .7rem;border-radius:999px;cursor:pointer;transition:background .14s,color .14s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--u);color:#fff}

/* ---------- информационная карточка ---------- */
.info{display:flex;gap:.7rem;align-items:flex-start;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-md);padding:.75rem .85rem;font-size:.85rem;line-height:1.5;color:var(--muted)}
.info .ii{flex:none;font-size:1.05rem;line-height:1.3}
.info b{color:var(--ink)}
.info code{font-family:ui-monospace,Menlo,monospace;font-size:.82rem;background:var(--u-soft);
  color:var(--u);border-radius:6px;padding:.1rem .35rem}

/* ---------- заметки об ученике ---------- */
.notes-new{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:.7rem .8rem}
.notes-new textarea{border:0;background:none;padding:0;min-height:3.6rem;font-size:.94rem}
.notes-new textarea:focus{box-shadow:none;border:0}
.notes-new .nn-foot{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  margin-top:.55rem;padding-top:.55rem;border-top:1px solid var(--line)}
.notes-new .nn-foot select{font-size:.82rem;padding:.35rem .55rem;border-radius:var(--r-sm);max-width:16rem}
.notes-new .nn-foot .btn{margin-left:auto}
.notes-line{margin-top:1rem;display:grid;gap:.55rem}
.note{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:.7rem .8rem}
.note .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--u);margin-top:.45rem}
.note .nx{font-size:.95rem;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.note .nmeta{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-top:.35rem}
.note .when{font-size:.75rem;color:var(--muted);white-space:nowrap}
.note .del{border:0;background:none;color:var(--muted);cursor:pointer;font-size:1.05rem;line-height:1;
  padding:.1rem .3rem;border-radius:6px;opacity:0;transition:opacity .14s,color .14s}
.note:hover .del{opacity:1}
.note .del:hover{color:#b4402f;background:#fdeeea}

/* ---------- сетки ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
@media (max-width:820px){ .grid2{grid-template-columns:1fr} }
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.7rem}

/* ---------- крупные кнопки-действия ---------- */
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.7rem;margin-bottom:1rem}
.qbtn{display:grid;gap:.15rem;text-align:left;text-decoration:none;font:inherit;cursor:pointer;
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:.85rem .95rem;box-shadow:var(--e1);transition:transform .12s,box-shadow .12s,border-color .12s}
.qbtn:hover{transform:translateY(-2px);box-shadow:var(--e3);border-color:color-mix(in srgb,var(--u) 40%,var(--line))}
.qbtn b{font-size:.98rem;font-weight:650}
.qbtn small{color:var(--muted);font-size:.79rem;line-height:1.4}
.qbtn.primary{background:var(--u);border-color:var(--u);color:#fff}
.qbtn.primary small{color:rgba(255,255,255,.82)}
.qbtn.primary:hover{border-color:var(--u)}

/* ---------- подвал ---------- */
.cab-foot{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;justify-content:center;
  margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.cab-foot .flink{border:0;background:none;color:var(--muted);font:inherit;font-size:.8rem;
  text-decoration:underline;cursor:pointer;padding:.2rem}
.cab-foot .flink:hover{color:var(--ink)}