/* ============================================================
   App-style mockups that mimic the real Sunclasses programs
   - .appwin  : light desktop window (Помощник классного руководителя)
   - .zwin    : green dashboard (Ассистент завуча)
   Self-contained light/green "screenshots" embedded in the dark site.
   ============================================================ */

/* ===================== Light desktop window ===================== */
.appwin {
  background: #eef1f5;
  border: 1px solid #c9d2de;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
  font-family: 'Inter', -apple-system, sans-serif;
  color: #1f2937;
  line-height: 1.35;
  font-size: 11px;
  text-align: left;
}

.appwin-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #e2e7ee;
  border-bottom: 1px solid #cfd6e0;
  padding: 6px 10px;
}
.appwin-bar .ico {
  width: 11px; height: 11px; border-radius: 2px;
  background: linear-gradient(135deg, #0ea5e9, #06b6d4);
}
.appwin-title { font-size: 10px; color: #3b4453; font-weight: 500; flex: 1; }
.appwin-ctrls { display: flex; gap: 7px; }
.appwin-ctrls i { width: 10px; height: 10px; border-radius: 2px; background: #c3cad6; display: inline-block; }

.appwin-tabs {
  display: flex; gap: 2px;
  background: #e7ebf1;
  padding: 5px 6px 0;
  border-bottom: 1px solid #cfd6e0;
}
.atab {
  font-size: 9.5px; color: #5b6472;
  background: #dde3ec;
  padding: 5px 9px; border-radius: 6px 6px 0 0;
  white-space: nowrap;
}
.atab.active {
  background: #fff; color: #2563eb; font-weight: 600;
  box-shadow: inset 0 -2px 0 #2563eb;
}

.appwin-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; background: #eef1f5; }

.acard { background: #fff; border: 1px solid #e2e7ee; border-radius: 8px; padding: 9px 10px; }
.albl { color: #2f6fe0; font-size: 9px; font-weight: 600; margin-bottom: 6px; }
.arow { display: flex; gap: 6px; align-items: center; }
.arow + .arow { margin-top: 6px; }
.ainput {
  flex: 1; background: #fff; border: 1px solid #d3dae4; border-radius: 6px;
  padding: 5px 8px; font-size: 9.5px; color: #4b5563;
}
.ainput.focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15); color: #1f2937; }

.abtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border-radius: 6px; padding: 6px 10px; font-size: 9.5px; font-weight: 600;
  color: #fff; white-space: nowrap;
}
.abtn.blue { background: #2563eb; }
.abtn.green { background: #16a34a; }
.abtn.red { background: #dc2626; }
.abtn.wide { width: 100%; }

/* tables */
.atable { width: 100%; border-collapse: collapse; }
.atable th { font-size: 8.5px; color: #5b6472; font-weight: 600; text-align: left; padding: 4px 5px; border-bottom: 1px solid #e2e7ee; }
.atable td { font-size: 9px; padding: 4px 5px; border-bottom: 1px solid #eef1f5; color: #374151; }
.atable td.c, .atable th.c { text-align: center; }
.sdot { display: inline-flex; align-items: center; gap: 4px; font-size: 8.5px; color: #4b5563; }
.sdot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--d, #22c55e); }
.sdot.green  { --d: #22c55e; }
.sdot.red    { --d: #ef4444; }
.sdot.yellow { --d: #eab308; }
.sdot.orange { --d: #f97316; }
.sdot.blue   { --d: #3b82f6; }

/* KPI strip */
.akpis { display: flex; gap: 6px; }
.akpi { flex: 1; background: #fff; border: 1px solid #e2e7ee; border-radius: 7px; padding: 7px 4px; text-align: center; }
.akpi b { display: block; font-size: 12px; font-weight: 700; }
.akpi span { font-size: 7.5px; color: #6b7280; }
.akpi b.orange { color: #f59e0b; }
.akpi b.green { color: #16a34a; }

/* stats lines */
.astat-line { display: flex; justify-content: space-between; font-size: 9.5px; padding: 2px 0; }
.astat-line .v { font-weight: 700; }
.astat-line .v.orange { color: #f59e0b; }

/* checkboxes */
.chk { display: flex; align-items: center; gap: 6px; font-size: 9px; color: #374151; padding: 2.5px 0; }
.chk i { width: 11px; height: 11px; border: 1.5px solid #c3cad6; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.chk.on i { background: #2563eb; border-color: #2563eb; }
.chk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.atextarea { background: #fff; border: 1px solid #d3dae4; border-radius: 6px; padding: 7px 8px; font-size: 9px; color: #9aa3b0; min-height: 30px; }

.afile { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 1.5px dashed #c3cad6; border-radius: 7px; font-size: 9px; color: #8a93a1; background: #fafbfd; }
.abadge-line { font-size: 9px; padding: 5px 8px; border-radius: 6px; }
.abadge-line.green { background: #e8f6ec; color: #1f7a3a; }
.abadge-line.blue { background: #e7f0fe; color: #2257c4; }

/* ===================== Green vice-principal dashboard ===================== */
.zwin {
  background: #eef3ef;
  border: 1px solid #c7d6cb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
  font-family: 'Inter', -apple-system, sans-serif;
  color: #1f2937; text-align: left; font-size: 12px;
}
.zhead { background: linear-gradient(135deg, #305f40, #244d34); color: #fff; padding: 14px 18px 0; }
.zhead h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.zhead p { font-size: 10.5px; color: #cbe0d1; margin-top: 3px; padding-bottom: 12px; }
.znav { display: flex; flex-wrap: wrap; gap: 6px; background: linear-gradient(135deg, #305f40, #244d34); padding: 0 12px 12px; }
.zpill { font-size: 10px; color: #d6e8db; background: rgba(255, 255, 255, 0.08); padding: 5px 10px; border-radius: 7px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.zpill.active { background: #eaf4ec; color: #23512f; font-weight: 600; }

.zbody { padding: 14px; }

.zhero {
  background: linear-gradient(135deg, #2f5d3f, #27503a);
  border-radius: 12px; padding: 16px 18px; color: #fff;
  display: flex; justify-content: space-between; gap: 14px; align-items: flex-start;
  margin-bottom: 16px;
}
.zhero-l { flex: 1; }
.zhero-l h4 { font-size: 14px; font-weight: 700; margin-bottom: 7px; display: flex; align-items: center; gap: 7px; }
.zhero-l p { font-size: 10px; color: #d4e7d9; max-width: 380px; line-height: 1.5; }
.zschool { margin-top: 12px; background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 6px 12px; font-size: 9.5px; color: #e7f2e9; display: inline-block; }
.zhero-stats { display: flex; gap: 12px; background: rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 12px 14px; flex-shrink: 0; }
.zstat { text-align: center; }
.zstat b { display: block; font-size: 17px; font-weight: 800; line-height: 1; }
.zstat span { font-size: 7.5px; color: #cfe3d4; text-transform: uppercase; letter-spacing: 0.03em; }

.zquick { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; }
.zquick b { font-size: 12px; color: #234d32; display: inline-flex; align-items: center; gap: 5px; }
.zquick span { font-size: 9px; color: #7a8a7d; }

.zcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.zcard { background: #fff; border: 1px solid #e0e8e1; border-radius: 10px; padding: 11px; }
.zcard .zico { width: 30px; height: 30px; border-radius: 8px; background: #e6f2ea; display: flex; align-items: center; justify-content: center; font-size: 15px; margin-bottom: 8px; }
.zcard h5 { font-size: 10.5px; margin-bottom: 4px; color: #1f3326; font-weight: 600; }
.zcard p { font-size: 8px; color: #6f7d72; line-height: 1.4; margin-bottom: 8px; }
.zbadge { display: inline-flex; align-items: center; gap: 3px; font-size: 8px; font-weight: 600; color: #2f7d43; background: #e3f3e8; border: 1px solid #bfe2c9; padding: 2px 7px; border-radius: 10px; }
.zbadge.set { color: #2257c4; background: #e7f0fe; border-color: #bcd2f7; }

@media (max-width: 768px) {
  .zcards { grid-template-columns: repeat(2, 1fr); }
  .zhero { flex-direction: column; }
}