/* «Графики» — экран графиков смен (03.10.2026). Тот же язык «Пульта»: токены styles.css, Golos Text, табличные
   цифры. Ячейка смены — плитка приборной панели: рабочая смена светится акцентом, отметки — своим цветом
   (больничный — тревожным, отпуск — жёлтым, замена — зелёным), выходной — гаснет. */

.sc-page { --sc-name: 176px; --sc-col: 46px; display: block; position: relative; }
.sc-head { margin-bottom: 14px; }
.sc-head h1 { margin-right: 4px; }
.sc-store select { min-width: 220px; max-width: 340px; }
.sc-one { font-weight: 600; color: var(--ink-2); }
.sc-months button { display: inline-flex; align-items: center; gap: 6px; }
.sc-months button[aria-pressed="true"] { background: var(--surface-3); box-shadow: 0 1px 0 rgb(255 255 255 / .05) inset, 0 2px 8px -2px rgb(0 0 0 / .35); }
.sc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
.sc-dot.submitted { background: var(--warn); } .sc-dot.approved { background: var(--ok); }

/* ---------- состояние ---------- */

.sc-bar {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 14px 16px; margin-bottom: 14px; position: relative; overflow: hidden;
}
.sc-bar::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line-2);
}
.sc-bar.is-centr::after { background: var(--accent); }
.sc-bar-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sc-src { display: grid; gap: 2px; min-width: 0; }
.sc-src b { font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.sc-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sc-acts .btn { min-height: 40px; padding: 0 16px; font-size: 13.5px; }
.btn.armed { background: var(--warn); color: #1A1200; }
.sc-return { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.sc-return input { width: 100%; }
.sc-comment {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--warn-tile); color: var(--ink);
  font-size: 13.5px; line-height: 1.45;
}
.sc-window { margin-top: 8px; }

/* ---------- кисть и легенда ---------- */

.sc-tools { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.sc-brush { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sc-brush .meta { margin-right: 4px; }
.sc-brush-note { margin: -2px 0 10px; }
.sc-legend { gap: 6px 12px; }
.sc-key { width: 12px; height: 12px; border-radius: 4px; display: inline-block; flex: none; }

.sc-chip {
  min-height: 34px; min-width: 44px; padding: 0 10px; border-radius: 9px; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); transition: transform .15s var(--ease), box-shadow .2s, border-color .2s;
}
.sc-chip .ico { width: 15px; height: 15px; }
.sc-chip:hover { border-color: var(--ink-3); }
.sc-chip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); border-color: transparent; }

/* Цвета видов ячейки: w — смена, o — выходной, s — больничный, v — отпуск, u — учебный центр, r — замена,
   t — прогул, e — пусто. */
.k-w { background: var(--accent-wash); color: var(--ink); border-color: color-mix(in oklab, var(--accent) 38%, transparent); }
.k-o { background: transparent; color: var(--ink-3); }
.k-s { background: var(--bad-tile); color: var(--ink); border-color: color-mix(in oklab, var(--bad) 45%, transparent); }
.k-v { background: var(--warn-tile); color: var(--ink); border-color: color-mix(in oklab, var(--warn) 45%, transparent); }
.k-u { background: transparent; color: var(--accent-strong); border-color: var(--accent); border-style: dashed; }
.k-r { background: var(--ok-tile); color: var(--ink); border-color: color-mix(in oklab, var(--ok) 45%, transparent); }
.k-t { background: var(--bad-cell); color: var(--ink); border-color: var(--bad); }
.k-x { background: var(--surface-2); color: var(--ink-2); }
.sc-key.k-o { border: 1px solid var(--line-2); }
.sc-key.k-w, .sc-key.k-s, .sc-key.k-v, .sc-key.k-u, .sc-key.k-r, .sc-key.k-t { border: 1px solid; }

/* ---------- месяц: сетка ---------- */

.sc-wrap {
  overflow: auto; max-height: calc(100vh - var(--top-h) - 250px); min-height: 280px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
  overscroll-behavior: contain; position: relative;
}
.sc-wrap:focus-visible { outline-offset: -2px; }
.sc-grid { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; min-width: 100%; }
.sc-grid th, .sc-grid td { padding: 0; border-bottom: 1px solid var(--line); text-align: center; }
.sc-grid thead th {
  position: sticky; top: 0; z-index: 3; background: var(--surface); height: 48px; min-width: var(--sc-col);
  font-weight: 500; border-bottom: 1px solid var(--line-2);
}
.sc-grid tfoot th, .sc-grid tfoot td {
  position: sticky; bottom: 0; z-index: 3; background: var(--surface-2); height: 38px; border-top: 1px solid var(--line-2);
  border-bottom: 0; font-size: 12.5px; color: var(--ink-2); font-weight: 600;
}
.sc-day b { display: block; font-size: 14px; font-weight: 650; color: var(--ink); line-height: 1.1; }
.sc-day span { display: block; font-size: 11px; color: var(--ink-3); }
.sc-day.we span { color: var(--warn); }
.sc-day.today { box-shadow: inset 0 -2px 0 var(--accent); }
.sc-day.today b { color: var(--accent-strong); }
.sc-day.warn-nobody::after, .sc-day.warn-open::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--bad);
}
.sc-day.warn-open::after { background: var(--warn); }
.sc-grid td.we, .sc-grid th.we { background-color: color-mix(in oklab, var(--surface-2) 60%, var(--surface)); }
.sc-grid thead th.we { background: color-mix(in oklab, var(--surface-2) 60%, var(--surface)); }
.sc-grid td.today { background: color-mix(in oklab, var(--accent) 6%, var(--surface)); }
.sc-foot.warn-nobody { color: var(--bad); background: var(--bad-tile); }
.sc-foot.warn-open { color: var(--warn); }

.sc-name {
  position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left !important;
  min-width: var(--sc-name); max-width: var(--sc-name); padding: 6px 30px 6px 14px !important;
  border-right: 1px solid var(--line-2);
}
.sc-grid thead .sc-corner {
  position: sticky; left: 0; top: 0; z-index: 4; text-align: left; padding-left: 14px; font-size: 12px;
  color: var(--ink-3); border-right: 1px solid var(--line-2); min-width: var(--sc-name);
}
.sc-grid tfoot .sc-name { z-index: 4; background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); }
.sc-n { display: block; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-pos { display: block; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-rm {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; color: var(--ink-3); opacity: 0; transition: opacity .15s, background .15s;
}
.sc-rm .ico { width: 14px; height: 14px; }
.sc-rm::before { content: ""; position: absolute; inset: -9px; }
tr:hover .sc-rm, .sc-rm:focus-visible, .sc-rm.armed { opacity: 1; }
.sc-rm:hover { background: var(--surface-3); color: var(--ink); }
.sc-rm.armed { width: auto; padding: 0 8px; background: var(--bad-tile); color: var(--ink); font-size: 12px; font-weight: 600; }

.sc-grid td { padding: 3px 2px; }
.sc-cell {
  width: 42px; height: 34px; border-radius: 8px; border: 1px solid transparent; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; letter-spacing: -.02em; white-space: nowrap;
  transition: transform .15s var(--ease), box-shadow .2s, background .2s;
}
button.sc-cell { cursor: pointer; }
button.sc-cell:hover { box-shadow: 0 0 0 1px var(--ink-3); }
button.sc-cell.k-e:hover { background: var(--surface-2); }
button.sc-cell.k-e:hover::after { content: "+"; color: var(--ink-3); font-weight: 500; font-size: 14px; }
.sc-cell.open { box-shadow: 0 0 0 2px var(--accent); }
.sc-cell.pending { opacity: .62; }
.brushing button.sc-cell { cursor: crosshair; }
.sc-sum { min-width: 70px; padding: 0 12px !important; text-align: right !important; border-left: 1px solid var(--line-2); }
.sc-sum b { display: block; font-size: 13.5px; font-weight: 650; }
.sc-sum span { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400; }
.sc-grid thead .sc-sum { font-size: 12px; color: var(--ink-3); }

/* ---------- окно ячейки ---------- */

.sc-pop {
  position: absolute; z-index: 30; width: 296px; padding: 12px; border-radius: var(--r); background: var(--surface);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-pop); display: grid; gap: 10px;
  animation: sc-in .22s var(--ease);
}
.sc-pop-h { display: flex; align-items: baseline; gap: 8px; }
.sc-pop-h b { font-size: 14px; }
.sc-pop-h span { font-size: 12.5px; color: var(--ink-3); flex: 1; }
.sc-x { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-3); margin: -6px -6px 0 0; }
.sc-x .ico { width: 16px; height: 16px; }
.sc-x:hover { background: var(--surface-2); color: var(--ink); }
.sc-pop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sc-pop-f { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.sc-pop-f input { min-width: 0; }
.sc-pop-f .btn { min-height: 40px; }
.sc-clear { min-height: 36px; border-radius: 9px; color: var(--ink-2); border: 1px dashed var(--line-2); font-size: 13px; }
.sc-clear:hover { color: var(--ink); border-color: var(--ink-3); }
@keyframes sc-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* ---------- добавить, покрытие, журнал ---------- */

.sc-add { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.sc-add.card { padding: 14px 16px; }
.sc-add .field.grow { flex: 1 1 260px; }
.sc-add input { width: 100%; }
.sc-cov, .sc-audit { margin-top: 14px; }
.sc-ok { color: var(--ok); font-weight: 600; }
.sc-warns { list-style: none; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sc-warns li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.sc-audit-h { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; min-height: 32px; }
.sc-audit-h h2 { font-size: 15px; font-weight: 600; }
.sc-caret { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); font-weight: 600; }
.sc-log { list-style: none; margin-top: 12px; display: grid; max-height: 360px; overflow: auto; }
.sc-log li {
  display: grid; grid-template-columns: 96px 150px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-2);
}
.sc-log s { color: var(--ink-3); }
.sc-log b { color: var(--ink); }

/* ---------- загрузка ---------- */

.sk { border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); animation: shimmer 1.4s ease-in-out infinite; }
.sk-card { height: 360px; }
.sk-line { height: 40px; margin-top: 12px; }

/* ---------- телефон: человек × неделя ---------- */

.sc-people { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; margin: 0 calc(-1 * var(--gut)); padding-left: var(--gut); padding-right: var(--gut); }
.sc-people::-webkit-scrollbar { display: none; }
.sc-people .chip { flex: none; }
.sc-week { padding: 12px; touch-action: pan-y; }
.sc-week.from-r { animation: sc-from-r .28s var(--ease); }
.sc-week.from-l { animation: sc-from-l .28s var(--ease); }
@keyframes sc-from-r { from { opacity: .3; transform: translateX(24px); } }
@keyframes sc-from-l { from { opacity: .3; transform: translateX(-24px); } }
.sc-week-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.sc-week-h .icon-btn[disabled] { opacity: .3; }
.sc-week-t { flex: 1; min-width: 0; text-align: center; display: grid; }
.sc-week-t b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-week-t span { font-size: 12px; color: var(--ink-3); }
.sc-days { list-style: none; display: grid; }
.sc-days li {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; min-height: 60px;
  border-top: 1px solid var(--line); padding: 6px 2px;
}
.sc-days li.we .sc-dd { color: var(--warn); }
.sc-days li.today .sc-dd b { color: var(--accent-strong); }
.sc-dd { display: grid; line-height: 1.1; font-size: 12px; color: var(--ink-3); }
.sc-dd b { font-size: 20px; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.sc-dinfo { font-size: 12.5px; color: var(--ink-3); display: grid; gap: 2px; min-width: 0; }
.sc-w { font-style: normal; font-weight: 600; color: var(--warn); }
.sc-w.nobody { color: var(--bad); }
.sc-cell.big { width: 96px; height: 46px; font-size: 15px; border-radius: 12px; }
.sc-week-f { margin-top: 8px; text-align: center; }

@media (max-width: 760px) {
  .sc-head { gap: 8px; }
  .sc-head h1 { width: 100%; }
  .sc-store, .sc-store select { flex: 1; min-width: 0; width: 100%; }
  .sc-months { width: 100%; }
  .sc-months button { flex: 1; justify-content: center; }
  .sc-acts { width: 100%; justify-content: stretch; }
  .sc-acts .btn { flex: 1 1 auto; min-height: var(--tap); }
  .sc-legend { font-size: 11.5px; }
  .sc-pop.sheet {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; border-radius: 18px 18px 0 0;
    padding: 16px 16px calc(16px + var(--safe-b)); z-index: 60; animation: sc-up .28s var(--ease);
    box-shadow: 0 -12px 32px -8px rgb(0 0 0 / .5), 0 0 0 100vmax var(--scrim);
  }
  .sc-pop.sheet .sc-chip { min-height: var(--tap); font-size: 15px; }
  .sc-log li { grid-template-columns: 1fr; gap: 2px; }
}
@keyframes sc-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  .sc-pop, .sc-week.from-r, .sc-week.from-l, .sc-pop.sheet { animation: none; }
}