/* Управление: боковая панель поверх доски */
[hidden] { display: none !important; }

.top-link {
  font-size: 14px; color: var(--ink-2);
  text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer;
}
.top-link:hover { color: var(--ink); }

.a-h2 { font: 400 26px/1.1 var(--serif); margin-bottom: 20px; }
.hint { font-size: 13px; color: var(--ink-2); margin: -8px 0 16px; }

/* поля */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; min-width: 0; }
.field > span { font-size: 13px; color: var(--ink-2); }
.field--inline { flex-direction: row; align-items: center; gap: 12px; margin: 0; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
input, select {
  font: inherit; color: var(--ink);
  width: 100%; min-height: 46px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--line); border-radius: 10px;
}
input:focus, select:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.check { display: flex; align-items: center; gap: 10px; margin: 6px 0 22px; cursor: pointer; }
.check input { width: 20px; min-height: 20px; height: 20px; accent-color: var(--ink); }

.btn {
  font: 500 15px/1 var(--sans);
  min-height: 46px; padding: 0 22px;
  background: var(--ink); color: var(--paper);
  border: 0; border-radius: 40px; cursor: pointer;
  transition: opacity .2s, transform .1s;
}
.btn:hover { opacity: .85; }
.btn:active { transform: scale(.98); }
.btn--small { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn--ghost:hover { border-color: var(--ink); opacity: 1; }

/* панель */
.scrim {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(21, 20, 18, .28);
  animation: fadeIn .25s ease;
}
/* управление — небольшое окно по центру экрана */
.drawer {
  position: fixed; z-index: 21; left: 50%; top: 50%;
  width: min(460px, calc(100vw - 24px));
  max-height: min(80vh, 720px);
  transform: translate(-50%, -50%);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 22px 24px;
  background: var(--paper);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(21, 20, 18, .28);
  animation: drawerIn .28s var(--ease);
}
.drawer-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 20px;
  padding: 18px 0 14px; margin-bottom: 8px;
  background: var(--paper);
}
.drawer-head .a-h2 { margin: 0 auto 0 0; }
.x {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.x:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@keyframes drawerIn { from { transform: translate(-50%, -46%) scale(.97); opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } }
body.is-locked { overflow: hidden; }


/* вход */
.login-box .hint { margin: 8px 0 20px; }
.login-box .btn { width: 100%; }
.form-err { margin-top: 12px; min-height: 1.5em; font-size: 14px; color: #a23a26; }

/* вкладки */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--ink); margin-bottom: 28px; overflow-x: auto; }
.tabs button {
  font: 500 15px/1 var(--sans);
  padding: 14px 16px; background: none; border: 0; cursor: pointer;
  color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
  white-space: nowrap;
}
.tabs button.is-on { color: var(--ink); border-bottom-color: var(--ink); }

.cols { display: grid; gap: 32px; }

/* сегментный выбор */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 40px; font-size: 14px;
  transition: background .15s, color .15s, border-color .15s;
}
.seg input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* кнопки «+» прямо в строках доски — видны только администратору */
.row-act { display: none; gap: 6px; margin-top: 8px; }
body.is-admin .row-act { display: flex; }
.row-act button {
  font: 500 12px/1 var(--sans); color: var(--ink);
  padding: 6px 10px; border-radius: 20px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--line); cursor: pointer;
}
.row-act button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.row-act button:disabled { opacity: .4; cursor: default; }

/* журнал */
.log-head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.log-head .field { margin: 0; }
.log-sum { margin: 14px 0 16px; font-size: 14px; }
.log-sum b { font-weight: 600; }
.deal-add {
  display: grid; gap: 10px; margin-bottom: 8px; padding: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
/* в маленьком окне: сумма и кнопка в ряд, дата — отдельной строкой во всю ширину */
.deal-add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.deal-add-row input[type=datetime-local] { grid-column: 1 / -1; grid-row: 2; }
.deals li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.deal-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.drag {
  flex: none; width: 28px; height: 40px; margin-right: -4px; padding: 0;
  border: 0; background: none; color: var(--ink-2);
  font-size: 18px; letter-spacing: -3px; cursor: grab; touch-action: none;
}
.deals li.is-dragging {
  position: relative; z-index: 2; cursor: grabbing;
  background: var(--card); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(21, 20, 18, .18);
}
.deals li.plan-line {
  justify-content: center; padding: 6px 0;
  font-size: 12px; font-weight: 500; color: var(--up);
  border-bottom: 2px solid var(--up);
}
.deal-sum { font-weight: 600; }
.deal-meta { font-size: 13px; color: var(--ink-2); }
.deal-act { display: flex; gap: 6px; flex: none; }
.deals li.is-editing { display: block; }
.deal-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.deal-edit input[name=t], .deal-edit .deal-act { grid-column: 1 / -1; }
.deals .empty-hint { color: var(--ink-2); font-size: 14px; display: block; }
body.is-admin #rentRows .name { cursor: pointer; text-decoration: underline dotted var(--line); text-underline-offset: 4px; }
.del {
  font: inherit; font-size: 13px; color: var(--ink-2);
  background: none; border: 1px solid var(--line); border-radius: 20px;
  padding: 6px 12px; cursor: pointer;
}
.del:hover:not(:disabled) { color: #a23a26; border-color: #a23a26; }
.del:disabled { opacity: .35; cursor: default; }

/* агенты */
.agents li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.agents li.is-off input[type=text] { color: var(--ink-2); }
.agents .on { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.agents .on input { width: 18px; min-height: 18px; height: 18px; accent-color: var(--ink); }
.add { display: flex; gap: 10px; margin-top: 16px; }
.add--top { margin: 0 0 18px; }
.agents .empty-hint { color: var(--ink-2); font-size: 14px; border: 0; }
.save-bar { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.save-bar .hint { margin: 0; }

/* уведомление */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: 24px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  width: fit-content; max-width: 560px;
  padding: 12px 18px; border-radius: 22px;
  background: var(--ink); color: var(--paper); font-size: 14px;
  box-shadow: 0 10px 30px rgba(21, 20, 18, .25);
  animation: fadeUp .3s var(--ease);
  z-index: 30;
}
.toast.is-err { background: #a23a26; }
.toast button { font: 600 14px/1 var(--sans); color: var(--paper); background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 0; }

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .drawer { padding: 0 16px 32px; }
  .tabs { gap: 0; scrollbar-width: none; }
  .tabs button { flex: 1; padding: 14px 4px; font-size: 14px; }
  .row-act { gap: 4px; }
  .row-act button { padding: 5px 8px; font-size: 11.5px; }
}