/* SMP платформасы — дизайн жүйесі.
   Түстер бұрынғы жоспарлауыштан алынды, сондықтан көрнекі стиль сақталады. */

:root{
  --ink:#2A2723; --ink2:#4A453E; --mute:#8A837A;
  --clay:#B85C38; --sage:#6E8B6A; --ochre:#C89A3C; --slate:#7E9AA6;
  --sand:#EDE4D6; --cream:#FAF6EF; --paper:#FFFDF9; --line:#DDD3C4;
  --danger:#B4483C; --shadow:0 1px 2px rgba(42,39,35,.06);
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); color:var(--ink); background:var(--cream);
  min-height:100vh; font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--clay)}
h1,h2,h3,h4{font-family:var(--serif); margin:0; font-weight:700}

/* ---- Қаңқа ---- */
.topbar{
  background:var(--ink); color:var(--cream); padding:11px 22px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; position:sticky; top:0; z-index:30;
}
.topbar .brand{display:flex; flex-direction:column; line-height:1.15}
.topbar .tag{font-size:10px; letter-spacing:1.6px; color:var(--ochre); font-weight:700}
.topbar h1{font-size:18px; letter-spacing:.2px}
.spacer{flex:1}
.who{font-size:12px; color:#cfc6b8; text-align:right; line-height:1.3}
.who b{display:block; color:var(--cream); font-size:12.5px}

.nav{
  background:var(--paper); border-bottom:1px solid var(--line);
  display:flex; gap:2px; padding:0 22px; overflow-x:auto; position:sticky; top:52px; z-index:29;
}
.nav a{
  padding:11px 15px; font-size:13px; color:var(--ink2); text-decoration:none;
  border-bottom:2px solid transparent; white-space:nowrap; font-weight:600;
}
.nav a:hover{background:var(--sand)}
.nav a.on{border-bottom-color:var(--clay); color:var(--clay)}

.wrap{max-width:1240px; margin:0 auto; padding:20px 22px 70px}
.page-head{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:16px}
.page-head h2{font-size:22px}
.page-head p{margin:3px 0 0; font-size:12.5px; color:var(--mute); max-width:70ch}

/* ---- Түймелер мен өрістер ---- */
.btn{
  background:var(--paper); border:1px solid var(--line); color:var(--ink);
  padding:7px 13px; border-radius:3px; font-size:12.5px; cursor:pointer;
  font-family:inherit; transition:.15s; white-space:nowrap;
}
.btn:hover{background:var(--sand)}
.btn:focus-visible{outline:2px solid var(--clay); outline-offset:2px}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.solid{background:var(--clay); border-color:var(--clay); color:#fff}
.btn.solid:hover{background:#a04f2f}
.btn.dark{background:transparent; border-color:#5a544c; color:var(--cream)}
.btn.dark:hover{background:#3a352f}
.btn.danger{color:var(--danger); border-color:#e0bdb8}
.btn.danger:hover{background:#fbeeec}
.btn.sm{padding:4px 9px; font-size:11.5px}

select,input,textarea{
  font-family:inherit; font-size:13px; padding:7px 9px; width:100%;
  border:1px solid var(--line); border-radius:3px; background:var(--paper); color:var(--ink);
}
select:focus,input:focus,textarea:focus{outline:2px solid var(--clay); outline-offset:1px}
label{font-size:11px; color:var(--mute); font-weight:700; letter-spacing:.4px;
  display:block; margin-bottom:4px; text-transform:uppercase}

.toolbar{display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.toolbar .grow{flex:1; min-width:180px}
.toolbar input,.toolbar select{width:auto; min-width:130px}
.toolbar .grow input{width:100%}

/* ---- Карточкалар мен көрсеткіштер ---- */
.card{background:var(--paper); border:1px solid var(--line); border-radius:4px;
  box-shadow:var(--shadow); margin-bottom:18px}
.card > h3{padding:12px 16px; border-bottom:1px solid var(--line); font-size:15.5px;
  display:flex; align-items:center; gap:10px}
.card > h3 .hint{font-family:var(--sans); font-size:11.5px; color:var(--mute); font-weight:400}
.card .body{padding:16px}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border:1px solid var(--line); background:var(--paper); border-radius:4px; overflow:hidden;
  margin-bottom:18px; box-shadow:var(--shadow)}
.stat{padding:13px 16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.stat b{display:block; font-family:var(--serif); font-size:25px; line-height:1.15}
.stat span{font-size:10.5px; color:var(--mute); letter-spacing:.5px; text-transform:uppercase}
.stat small{display:block; font-size:11px; color:var(--mute); margin-top:3px}

/* ---- Кестелер ---- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:4px; background:var(--paper)}
table{border-collapse:collapse; width:100%; font-size:12.5px}
th,td{padding:8px 11px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
th{background:var(--sand); font-size:10.5px; letter-spacing:.5px; text-transform:uppercase;
  color:var(--ink2); font-weight:700; white-space:nowrap; position:sticky; top:0}
th.sortable{cursor:pointer; user-select:none}
th.sortable:hover{color:var(--clay)}
tbody tr:hover{background:#FBF7F0}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tfoot td{font-weight:700; background:var(--sand)}
.rowacts{white-space:nowrap; text-align:right}

.empty{padding:22px 16px; font-size:13px; color:var(--mute); font-style:italic; text-align:center}

/* ---- Белгілер ---- */
.chip{display:inline-block; font-size:10.5px; font-weight:700; padding:2px 7px;
  border-radius:2px; letter-spacing:.3px; white-space:nowrap}
.chip.lv-stip{background:#e7f0e6; color:#3f5c3c}
.chip.lv-mum{background:#fbf0e0; color:#7d5a17}
.chip.lv-com{background:#e6eef2; color:#3d5b66}
.chip.grey{background:var(--sand); color:var(--ink2)}
.chip.warn{background:#fbeee6; color:#8d4326}
.chip.bad{background:#fbeeec; color:var(--danger)}
.chip.good{background:#e7f0e6; color:#3f5c3c}

/* Рейтинг көрсеткіші */
.rate{display:inline-flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums}
.rate .bar{width:52px; height:6px; background:var(--sand); border-radius:3px; overflow:hidden}
.rate .bar i{display:block; height:100%; background:var(--sage)}
.rate.low .bar i{background:var(--danger)}
.rate.mid .bar i{background:var(--ochre)}

/* ---- Диаграммалар (таза CSS) ---- */
.barlist{display:grid; gap:9px}
.barrow{display:grid; grid-template-columns:150px 1fr 62px; gap:10px; align-items:center; font-size:12.5px}
.barrow .track{background:var(--sand); height:16px; border-radius:2px; overflow:hidden}
.barrow .track i{display:block; height:100%; background:var(--clay)}
.barrow .val{text-align:right; font-variant-numeric:tabular-nums; color:var(--ink2); font-weight:700}
.barrow.c2 .track i{background:var(--sage)}
.barrow.c3 .track i{background:var(--ochre)}
.barrow.c4 .track i{background:var(--slate)}

.split{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.split3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}

/* ---- Модал ---- */
.modal{position:fixed; inset:0; background:rgba(42,39,35,.55); display:flex;
  align-items:center; justify-content:center; padding:20px; z-index:60}
.sheet{background:var(--paper); width:100%; max-width:620px; border-radius:5px;
  max-height:92vh; overflow:auto; box-shadow:0 12px 40px rgba(42,39,35,.3)}
.sheet h3{padding:15px 20px; border-bottom:1px solid var(--line); font-size:17px}
.form{padding:18px 20px; display:grid; gap:13px}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.f3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:13px}
.acts{padding:14px 20px; border-top:1px solid var(--line); display:flex; gap:9px;
  justify-content:flex-end; flex-wrap:wrap}
.acts .spacer{flex:1}

/* ---- Ескертулер ---- */
.note{border:1px solid var(--line); border-left:3px solid var(--slate);
  background:var(--paper); padding:11px 14px; font-size:12.5px; color:var(--ink2);
  border-radius:0 3px 3px 0; margin-bottom:16px}
.note.warn{border-left-color:var(--ochre); background:#FBF6EC}
.note.bad{border-left-color:var(--danger); background:#FCF1EF}
.note b{color:var(--ink)}
.note ul{margin:7px 0 0; padding-left:18px}
.note li{margin:3px 0}

/* ---- Кіру беті ---- */
.login{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px}
.loginbox{background:var(--paper); border:1px solid var(--line); border-radius:6px;
  max-width:420px; width:100%; box-shadow:0 8px 30px rgba(42,39,35,.10); overflow:hidden}
.loginbox .head{background:var(--ink); color:var(--cream); padding:20px 24px}
.loginbox .head .tag{font-size:10px; letter-spacing:1.8px; color:var(--ochre); font-weight:700}
.loginbox .head h1{font-size:21px; margin-top:2px}
.loginbox .head p{margin:6px 0 0; font-size:12px; color:#cfc6b8}
.loginbox .form{padding:20px 24px}
.loginbox .foot{padding:0 24px 20px; font-size:11.5px; color:var(--mute)}
.err{color:var(--danger); font-size:12px; margin-top:-4px}

/* ---- Toast ---- */
#toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:80;
  display:grid; gap:8px; justify-items:center; pointer-events:none}
.toast{background:var(--ink); color:var(--cream); padding:9px 16px; border-radius:3px;
  font-size:12.5px; box-shadow:0 4px 16px rgba(42,39,35,.25); max-width:70ch}
.toast.bad{background:var(--danger)}
.toast.good{background:var(--sage)}

/* ---- Жоспар модулі ---- */
.seg{display:inline-flex; border:1px solid var(--line); border-radius:3px; overflow:hidden}
.seg button{background:var(--paper); border:none; padding:7px 15px; font-family:inherit;
  font-size:12.5px; cursor:pointer; color:var(--ink2); border-right:1px solid var(--line)}
.seg button:last-child{border-right:none}
.seg button.on{background:var(--ink); color:var(--cream); font-weight:700}

.day{border:1px solid var(--line); background:var(--paper); margin-top:13px; border-radius:4px; overflow:hidden}
.day.today{border-color:var(--clay); border-width:2px}
.dhead{display:flex; align-items:baseline; gap:12px; padding:10px 15px;
  background:var(--sand); border-bottom:1px solid var(--line)}
.day.today .dhead{background:var(--clay); color:#fff}
.dname{font-weight:700; font-size:14px}
.ddate{font-size:12px; color:var(--mute)}
.day.today .ddate,.day.today .dcount{color:#f6e2d8}
.dcount{margin-left:auto; font-size:11.5px; color:var(--mute)}
.prow{display:grid; grid-template-columns:92px 1fr 150px 118px 34px; gap:12px;
  padding:10px 15px; border-bottom:1px solid var(--line); align-items:start}
.prow:last-child{border-bottom:none}
.prow:hover{background:#FBF7F0}
.ptime{font-weight:700; font-size:12.5px; color:var(--clay)}
.ptime.allday{color:var(--mute); font-weight:400}
.pwhat{font-size:13.5px; line-height:1.45}
.pnote{display:block; font-size:11.5px; color:var(--mute); margin-top:3px}
.pproj{font-size:11.5px; color:var(--sage); font-weight:700}
.pplace{display:block; font-size:11.5px; color:var(--mute); font-weight:400; margin-top:2px}
.st{font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:2px; color:#fff; display:inline-block}
.x{background:none; border:none; color:var(--mute); cursor:pointer; font-size:16px; padding:2px 6px}
.x:hover{color:var(--clay)}
.addbar{padding:8px 15px; border-top:1px dashed var(--line)}
.addlink{background:none; border:none; color:var(--clay); font-family:inherit;
  font-size:12.5px; cursor:pointer; padding:2px 0; font-weight:700}
.addlink:hover{text-decoration:underline}

.ygrid{display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:14px}
.mcard{border:1px solid var(--line); background:var(--paper); display:flex; flex-direction:column; border-radius:4px; overflow:hidden}
.mcard.now{border-color:var(--clay); border-width:2px}
.mhead{padding:8px 12px; background:var(--sand); border-bottom:1px solid var(--line);
  display:flex; align-items:baseline; gap:8px}
.mcard.now .mhead{background:var(--clay); color:#fff}
.mname{font-family:var(--serif); font-size:14.5px; font-weight:700}
.mcount{margin-left:auto; font-size:10.5px; color:var(--mute)}
.mcard.now .mcount{color:#f6e2d8}
.mbody{padding:5px 0; flex:1; min-height:60px}
.ev{display:grid; grid-template-columns:38px 1fr; gap:8px; padding:5px 12px 5px 9px;
  border-left:3px solid transparent; cursor:pointer}
.ev:hover{background:#FBF7F0}
.evd{font-size:11px; font-weight:700; color:var(--ink2); padding-top:1px}
.evt{font-size:11.5px; line-height:1.35}
.evc{display:block; font-size:10px; color:var(--mute); margin-top:1px}
.mempty{padding:9px 12px; font-size:11px; color:var(--mute); font-style:italic}
.madd{padding:5px 12px; border-top:1px dashed var(--line)}
.legend{display:flex; gap:15px; flex-wrap:wrap; margin-top:16px; padding-top:12px;
  border-top:1px solid var(--line); font-size:11.5px; color:var(--mute)}
.lg{display:flex; align-items:center; gap:6px}
.lgd{width:11px; height:11px; border-radius:2px; display:inline-block}

/* ---- Импорт алдын ала қарау ---- */
.preview{max-height:340px; overflow:auto; border:1px solid var(--line); border-radius:3px}
.preview table{font-size:11.5px}
tr.bad td{background:#FCF1EF}
.issue{font-size:11px; color:var(--danger)}

.dropzone{border:2px dashed var(--line); border-radius:5px; padding:26px; text-align:center;
  background:var(--paper); color:var(--mute); font-size:13px; cursor:pointer}
.dropzone:hover,.dropzone.over{border-color:var(--clay); color:var(--ink2); background:#FBF7F0}

.loglist{max-height:300px; overflow:auto}
.logitem{font-size:12px; color:var(--mute); padding:5px 0; border-bottom:1px dotted var(--line)}
.logitem b{color:var(--ink2); font-weight:600}

@media(max-width:960px){
  .split,.split3{grid-template-columns:1fr}
  .ygrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .ygrid{grid-template-columns:1fr}
  .prow{grid-template-columns:1fr; gap:5px}
  .f2,.f3{grid-template-columns:1fr}
  .barrow{grid-template-columns:110px 1fr 54px}
  .wrap{padding:16px 14px 60px}
  .nav{padding:0 14px}
  .topbar{padding:10px 14px}
}
@media print{
  .topbar,.nav,.toolbar,.rowacts,.addbar,.madd{display:none!important}
  body{background:#fff}
  .card,.stats,.tablewrap{box-shadow:none; break-inside:avoid}
}

/* ---- Оқыту матрицасы ---- */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:16px; overflow-x:auto}
.tabs button{background:none; border:none; border-bottom:2px solid transparent; padding:9px 14px;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--ink2); cursor:pointer; white-space:nowrap}
.tabs button:hover{background:var(--sand)}
.tabs button.on{border-bottom-color:var(--clay); color:var(--clay)}

.matrix{overflow:auto; max-height:70vh; border:1px solid var(--line); border-radius:4px; background:var(--paper)}
.matrix table{border-collapse:separate; border-spacing:0; font-size:12px}
.matrix th,.matrix td{border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:6px 8px}
.matrix thead th{position:sticky; top:0; z-index:3; background:var(--sand); vertical-align:bottom;
  font-size:10.5px; text-transform:none; letter-spacing:0; line-height:1.25}
.matrix th.mxwho,.matrix td.mxwho{position:sticky; left:0; z-index:2; background:var(--paper); color:var(--ink);
  min-width:190px; max-width:230px; text-align:left; white-space:normal}
.matrix thead th.mxwho{z-index:4; background:var(--sand)}
.matrix td.mxwho b{display:block; font-weight:700; font-size:12.5px; color:var(--ink)}
.matrix td.mxwho span{color:var(--mute); font-size:11px}
.matrix th.course{min-width:104px; max-width:104px; white-space:normal}
.matrix th.course em{display:block; font-style:normal; color:var(--mute); font-size:10px; margin-top:2px}
.matrix th.course .req{color:var(--clay); font-weight:700}
.matrix td.cell{text-align:center; cursor:pointer; padding:0; height:34px}
.matrix td.cell:hover{background:#FBF7F0}
.matrix td.cell i{display:block; width:100%; height:100%; line-height:34px; font-style:normal;
  font-size:14px; font-weight:700; color:#fff}
.matrix td.cell.empty i{color:var(--line); font-size:16px}
.matrix tfoot td{position:sticky; bottom:0; background:var(--sand); font-weight:700; text-align:center; z-index:2}
.matrix tfoot td.mxwho{z-index:3; background:var(--sand); text-align:left}
.matrix tr:hover td.mxwho{background:#FBF7F0}

.mx-legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:11.5px; color:var(--mute)}
.mx-legend .lgd{width:11px; height:11px; border-radius:2px; display:inline-block; margin-right:5px}

.pctbar{display:inline-flex; align-items:center; gap:7px; font-variant-numeric:tabular-nums}
.pctbar .track{width:64px; height:7px; background:var(--sand); border-radius:4px; overflow:hidden}
.pctbar .track i{display:block; height:100%; background:var(--sage)}
.pctbar.low .track i{background:var(--danger)}
.pctbar.mid .track i{background:var(--ochre)}

/* Нұсқа белгісі — қай билд тұрғанын көзбен тексеру үшін. */
.topbar .ver{font-size:10.5px; color:#8f877b; letter-spacing:.5px; border:1px solid #4a453e;
  padding:2px 7px; border-radius:3px; white-space:nowrap}

/* Оқу жылын таңдау — жоғарғы панельде. */
.topbar .yearpick{display:flex; align-items:center; gap:7px; color:#cfc6b8; font-size:11px}
.topbar .yearpick > span{letter-spacing:.4px; text-transform:uppercase; font-weight:700; white-space:nowrap}
.topbar .yearpick select{width:auto; background:#3a352f; color:var(--cream); border-color:#5a544c;
  font-size:12px; padding:5px 7px}
@media(max-width:700px){ .topbar .yearpick > span{display:none} }

/* ---- Апта жоспарының кестелік көрінісі (координатор үлгісі) ---- */
.plantable{font-size:12.5px}
.plantable thead th{background:var(--ink); color:var(--cream); text-align:center;
  font-size:11px; letter-spacing:.5px; border-right:1px solid #4a453e}
.plantable thead th:last-child{border-right:none}
.plantable tbody td{border-right:1px solid var(--line); vertical-align:top}
.plantable tbody td:last-child{border-right:none}
.plantable td.pt-day{background:#33506E; color:#fff; text-align:center; vertical-align:middle;
  min-width:104px; padding:10px 8px}
.plantable td.pt-day.today{background:var(--clay)}
.plantable td.pt-day b{display:block; font-size:13px}
.plantable td.pt-day span{display:block; font-size:11px; color:#cfe0f0; margin-top:2px}
.plantable td.pt-day.today span{color:#f6e2d8}
.plantable td.pt-time{white-space:nowrap; font-weight:700; color:var(--clay); text-align:center;
  min-width:96px; background:#FDFAF4}
.plantable td.pt-time.allday{color:var(--mute); font-weight:400}
.plantable td.pt-empty{color:var(--mute); font-style:italic; background:#FDFAF4}
.plantable td.pt-note{color:var(--ink2); min-width:150px}
.plantable tbody tr:hover td:not(.pt-day){background:#FBF7F0}

/* ---- Сүзгі жолағы ---- */
.filterbar{background:var(--paper); border:1px solid var(--line); border-radius:4px;
  padding:10px 12px; margin-bottom:16px; box-shadow:var(--shadow)}
.filterbar select{max-width:210px}
.filterbar .fcount{font-size:12px; color:var(--mute); font-variant-numeric:tabular-nums; white-space:nowrap}
.filtered-note{font-size:12px; color:var(--clay); font-weight:600; margin-bottom:12px}
@media print{ .filterbar{display:none} }

/* ---- Нұсқаулық беті ---- */
.hstep{display:grid; grid-template-columns:34px 1fr; gap:12px; padding:12px 0;
  border-bottom:1px dotted var(--line)}
.hstep:last-child{border-bottom:none}
.hnum{width:28px; height:28px; border-radius:50%; background:var(--clay); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px}
.hstep b{font-size:14px}
.hstep p{margin:4px 0 0; font-size:13px; color:var(--ink2); line-height:1.55}
.hfaq{padding:11px 0; border-bottom:1px dotted var(--line)}
.hfaq:last-child{border-bottom:none}
.hfaq b{font-size:13.5px}
.hfaq p{margin:4px 0 0; font-size:13px; color:var(--ink2); line-height:1.55}

/* Синхрондау белгісі — деректер базаға жазылды ма. */
.topbar .sync{font-size:10.5px; letter-spacing:.3px; padding:2px 8px; border-radius:3px;
  white-space:nowrap; border:1px solid transparent}
.topbar .sync.ok{color:#9dc39a; border-color:#3f5c3c}
.topbar .sync.pending{color:var(--ochre); border-color:#6b5a2e}
.topbar .sync.error{color:#f0b4ac; background:#5a2b25; border-color:#8a4038; font-weight:700}