/* Новый вид экранов: стили группы «books». Подключён в index.html после app.css. */
/* Баланс, Заказы, Закрытие месяца, Ввод за день. Всё с префиксом bk-. */

.bk-stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.k-dot.bk-dot-mut{background:#ABABB7}
.bk-none{color:#595968}
/* общая таблица из app.css даёт тень и скругление — в карточках они не нужны */
:is(.bk-bal,.bk-lg,.bk-close,.bk-in) .k-table{box-shadow:none;border-radius:0;overflow:visible}

/* ---------- Баланс ---------- */
.bk-asof{font-size:15px;font-weight:600;color:#1C1C1E;white-space:nowrap}
.bk-bal-t td{vertical-align:top}
.bk-bal-t td.r{padding-top:12px}
/* пояснение под названием строки (это <a> без ссылки — см. balance.js) */
.bk-bal-t a.bk-bal-n{display:block;font-size:12.5px;line-height:1.45;color:#595968;margin-top:3px;text-decoration:none;cursor:default;font-weight:400}
.bk-bal-t .bk-bal-pay{font-size:13px;margin-left:6px;padding:0}
.bk-bal-t tr.k-hl td{background:#F8F8FA}
.bk-bal-t tr.k-hl td:first-child{padding-left:10px;border-radius:10px 0 0 10px}
.bk-bal-t tr.k-hl td:last-child{padding-right:10px;border-radius:0 10px 10px 0}
.bk-bal-loans{min-width:620px}
.bk-bal .k-attn-i{padding:4px 0 0}

/* ---------- Заказы ---------- */
.bk-lg .k-top-r{flex:1 1 260px;justify-content:flex-end}
.kv .bk-lg-q{width:280px;max-width:100%;min-height:44px;box-sizing:border-box}
.bk-lg-f{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.kv .bk-lg-f .k-btn2{min-height:40px;padding:0 14px;font-size:14px}
.kv .bk-lg-f .k-btn2 small{font-size:12.5px;opacity:.7;margin-left:3px;font-weight:500}
.kv .bk-lg-f .k-btn2.on{background:#1D1C4C;color:#fff;border-color:#1D1C4C}
.kv .bk-lg-f .k-btn2.on small{opacity:.85}
.bk-lg-t tbody tr{cursor:pointer}
.bk-lg-t tbody tr:focus-visible{outline:2px solid #393692;outline-offset:-2px}
.bk-lg-t td:first-child{white-space:nowrap;font-size:13.5px}
.bk-lg-t td:nth-child(2){max-width:340px}
.bk-lg-nm{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.bk-lg-t td.r{font-family:var(--num)}
.bk-lg-t td:last-child{font-size:13.5px}
.bk-lg-t tr.bk-lg-loss td{background:#FDF6F5}
.bk-lg-t tr.bk-lg-loss:hover td{background:#FBEFEE}
.bk-lg .k-foot{align-items:center;padding-top:14px}
.bk-lg-rt td:first-child{white-space:nowrap}
.bk-lg-rt .bk-lg-rn{font-size:12.5px;color:#595968;white-space:normal;min-width:220px}
.bk-lg .k-more .cf-table{margin-top:4px}

/* ---------- Закрытие месяца ---------- */
.bk-ck{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:13px 0;border-bottom:1px solid #F0F0F3}
.bk-ck:last-of-type{border-bottom:0}
.bk-ck .k-dot{margin-top:0}
.bk-ck-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.bk-ck-t b{font-size:15px;font-weight:600}
.bk-ck-t span{font-size:13px;color:#595968;line-height:1.45}
.bk-ck-t span.k-bad{color:#C2413A}
.bk-ck .k-link{min-height:40px;display:inline-flex;align-items:center}
.bk-mo{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 14px;align-items:center;padding:11px 0;border-bottom:1px solid #F0F0F3;font-size:14.5px}
.bk-mo:last-child{border-bottom:0}
.bk-mo-d{font-size:13px}
.bk-close .k-btn:disabled{opacity:.45;cursor:not-allowed}
.bk-close .k-btn:disabled:hover{background:#1D1C4C}

/* ---------- Ввод за день ---------- */
.bk-in-strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.bk-in-d,.bk-in-a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:11px 12px;border-radius:14px;border:1px solid #E5E5EB;
  background:#fff;color:#1C1C1E;font:inherit;text-align:left;cursor:pointer;box-shadow:none;min-height:44px}
.bk-in-d:hover,.bk-in-a:hover{background:#F9F9FA}
.bk-in-d small,.bk-in-a small{font-size:12.5px;color:#595968}
.bk-in-d b{font-size:16px;font-weight:600;white-space:nowrap;font-family:var(--num)}
.bk-in-d span,.bk-in-a span{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:500;margin-top:3px;white-space:nowrap}
.bk-in-d span i,.bk-in-a span i{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor}
.bk-in-d.g span,.bk-in-a.g span{color:#2E7D52}
.bk-in-d.a span,.bk-in-a.a span{color:#8A5A10}
.bk-in-d.n span,.bk-in-a.n span{color:#C2413A}
.bk-in-d.t span,.bk-in-a.t span{color:#595968}
.bk-in-d.on,.bk-in-a.on{border:2px solid #1D1C4C;padding:10px 11px;background:#fff}
.bk-in-steps{display:flex;flex-direction:column;gap:10px}
.k-card.bk-in-step{padding:0;overflow:hidden}
.bk-in-step.todo{border-color:#F0D9A8;background:#FFFCF6}
.bk-in-step.open{border-color:#B3B3BF;box-shadow:0 0 0 3px rgba(57,54,146,.08);background:#fff}
.kv .bk-in-sh{width:100%;display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:14px;align-items:center;padding:15px 22px;min-height:62px;
  background:none;border:0;border-radius:0;box-shadow:none;text-align:left;color:#1C1C1E;font:inherit;cursor:pointer}
.kv .bk-in-sh:hover{background:rgba(29,28,76,.03)}
.bk-in-sh .k-dot{margin-top:0}
.bk-in-st{display:flex;flex-direction:column;gap:2px;min-width:0}
.bk-in-st b{font-size:15px;font-weight:600}
.bk-in-st small{font-size:13px;color:#595968;line-height:1.4}
.bk-in-step.done .bk-in-st small{color:#2E7D52}
.bk-in-go{font-size:14px;font-weight:500;color:#292771;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.bk-in-step.todo .bk-in-go{text-decoration:none;background:#1D1C4C;color:#fff;border-radius:10px;padding:8px 14px}
.bk-in-step.open .bk-in-go{text-decoration:underline;background:none;color:#292771;padding:0}
.bk-in-step .in-body{padding:0 22px 22px 50px}
.bk-in-all{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.bk-in-a{padding:8px 10px}
.bk-in-a.on{padding:7px 9px}
.bk-in-a b{font-size:14px;font-weight:600;white-space:nowrap;font-family:var(--num)}
.bk-in-a span{font-size:12px}

@media (max-width:700px){
  /* Баланс */
  .bk-bal-t tr.k-hl td:first-child{padding-left:8px}
  /* Заказы: строка таблицы — блок: дата сверху, товар и «остаётся» рядом, цена и причина ниже */
  .bk-lg .k-top-r{flex-basis:100%}
  .kv .bk-lg-q{width:100%}
  .bk-lg-t thead{display:none}
  .bk-lg-t tbody,.bk-lg-t{display:block}
  .bk-lg-t tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:11px 0;border-bottom:1px solid #F0F0F3}
  .bk-lg-t tr:last-child{border-bottom:0}
  .bk-lg-t td{padding:0;border:0;max-width:none}
  .bk-lg-t td:nth-child(1){grid-column:1 / -1;font-size:12.5px}
  .bk-lg-t td:nth-child(2){grid-column:1;grid-row:2 / span 2;min-width:0}
  .bk-lg-t td:nth-child(4){grid-column:2;grid-row:2}
  .bk-lg-t td:nth-child(3){grid-column:2;grid-row:3;font-size:12.5px;color:#595968}
  .bk-lg-t td:nth-child(3)::before{content:attr(data-l)}
  .bk-lg-t td:nth-child(5){grid-column:1 / -1;font-size:12.5px;color:#C2413A}
  .bk-lg-t td.bk-none{display:none}
  .bk-lg-t tr.bk-lg-loss td{background:none}
  .bk-lg-t tr.bk-lg-loss{background:#FDF6F5;margin:0 -16px;padding-left:16px;padding-right:16px}
  .bk-lg-f{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 12px;padding:0 16px 4px;scrollbar-width:none}
  .kv .bk-lg-f .k-btn2{flex:none}
  .bk-lg-rt .bk-lg-rn{min-width:200px}
  /* Закрытие */
  .bk-ck{grid-template-columns:14px minmax(0,1fr)}
  .bk-ck>.k-chip,.bk-ck>.k-link{grid-column:2;justify-self:start}
  .bk-ck .k-dot{align-self:start;margin-top:6px}
  .bk-mo{grid-template-columns:minmax(0,1fr) auto}
  .bk-mo-d{grid-column:1;grid-row:2}
  .bk-mo>.k-chip{grid-column:2;grid-row:1 / span 2}
  .bk-close .k-top-r,.bk-close .k-top-r .k-btn{width:100%}
  /* Ввод за день: семь дней в ряд, мельче */
  .bk-in-strip{gap:5px}
  .bk-in-d{align-items:center;text-align:center;padding:9px 2px;border-radius:12px}
  .bk-in-d.on{padding:8px 1px}
  .bk-in-d small{font-size:11px}
  .bk-in-d b{font-size:13px}
  .bk-in-d span{font-size:10.5px;gap:3px;margin-top:2px}
  .bk-in-d span i{display:none}
  .kv .bk-in-sh{padding:13px 16px;gap:12px}
  .bk-in-step .in-body{padding:0 16px 16px}
  /* встроенные загрузчики шире телефона: таблицы листаются внутри шага, поле файла не вылезает */
  .bk-in-step .in-body{overflow-x:auto}
  .bk-in-step .in-body table{display:block;overflow-x:auto;max-width:100%}
  .bk-in-step .in-body input[type=file]{max-width:100%;min-width:0;box-sizing:border-box}
  .bk-in-step .in-body .form{grid-template-columns:minmax(0,1fr)!important}   /* у загрузчиков в разметке две колонки — на телефоне одна */
  .bk-in-all{grid-template-columns:repeat(4,minmax(0,1fr))}
}