/* Портал офис-менеджера — дополнения к дизайн-системе финпортала.
   Токены не добавляются: всё строится на --paper/--surface/--ink/--accent
   и смысловых --red/--amber/--green из ds.css. */

[hidden] { display: none !important; }
.top { top: env(safe-area-inset-top, 0px); }
.side { top: calc(57px + env(safe-area-inset-top, 0px)); }
body { background: var(--paper); color: var(--ink); }

.proto-bar {
  background: var(--accent-soft); color: var(--accent); font-size: var(--fs-xs);
  padding: 5px 24px; border-bottom: 1px solid var(--line); letter-spacing: .02em;
}
.proto-bar b { font-weight: 600; }

.page-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-h h1 { margin: 4px 0 6px; text-wrap: balance; }
.page-h .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.stack { display: grid; gap: var(--gap); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.muted { color: var(--ink-3); }
.sm { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.mt { margin-top: var(--gap); }
.mt2 { margin-top: calc(var(--gap) * 1.5); }
.r { text-align: right; }
.nowrap { white-space: nowrap; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gap); align-items: start; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }
.sticky-col { position: sticky; top: calc(76px + env(safe-area-inset-top, 0px)); }
@media (max-width: 1100px) { .sticky-col { position: static; } }

.btn-sm { padding: 5px 10px; font-size: var(--fs-xs); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.req { color: var(--red); }

/* Форма: поля сеткой */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .form-grid, .form-grid.g-3 { grid-template-columns: 1fr; } }
.field .label { display: block; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); margin-bottom: 5px; }
.choice { display: flex; gap: 6px; flex-wrap: wrap; }
.choice label {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); font-size: var(--fs-sm); background: var(--surface);
}
.choice input { margin: 0; accent-color: var(--accent); }
.choice label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-sm); }
.check input[type="checkbox"] { margin-top: 3px; accent-color: var(--accent); flex: none; }

/* Зона загрузки файла */
.drop {
  border: 1.5px dashed var(--line-2); border-radius: var(--radius); background: var(--surface);
  padding: 26px 18px; text-align: center; display: grid; gap: 6px; justify-items: center; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop b { font-size: 15px; }
.drop input { display: none; }
.file-pill {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface-2); font-size: var(--fs-sm);
}
.file-ico {
  width: 30px; height: 36px; border-radius: 3px; background: var(--red-soft); color: var(--red);
  font: 600 9px/36px var(--ff-num); text-align: center; flex: none; border: 1px solid var(--line);
}
.recog { border-left: 3px solid var(--green); }
.ai-tag { font-size: var(--fs-xs); color: var(--green); font-weight: 600; letter-spacing: .04em; }
.input.ai { background: var(--green-soft); border-color: color-mix(in srgb, var(--green) 35%, transparent); }

/* Очередь внимания */
.q-group + .q-group { margin-top: 22px; }
.q-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.q-head h2 { margin: 0; font-size: 16px; }
.q-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.q-item {
  display: grid; grid-template-columns: 22px 116px minmax(0, 1fr) auto; gap: 12px; align-items: start;
  padding: var(--row-y) 14px; border-top: 1px solid var(--line); border-left: 3px solid transparent;
}
.q-item:first-child { border-top: 0; border-radius: var(--radius) var(--radius) 0 0; }
.q-item[data-s="red"] { border-left-color: var(--red); }
.q-item[data-s="amber"] { border-left-color: var(--amber); }
.q-item[data-s="green"] { border-left-color: var(--green); }
.q-item input[type="checkbox"] { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--green); }
.q-kind { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.q-t { font-weight: 500; }
.q-s { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 2px; }
.q-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.q-item.done { opacity: .55; }
.q-item.done .q-t { text-decoration: line-through; }
@media (max-width: 760px) {
  .q-item { grid-template-columns: 22px minmax(0, 1fr); }
  .q-kind { grid-column: 2; padding: 0; }
  .q-body, .q-meta { grid-column: 2; justify-content: flex-start; }
}

/* Шаги процесса */
.steps { display: flex; gap: 0; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--ink-4); padding: 4px 0; }
.step + .step::before { content: ""; width: 22px; height: 1px; background: var(--line-2); margin: 0 8px; }
.step i {
  font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center;
  border: 1px solid var(--line-2); font: 600 10px var(--ff-num); color: var(--ink-3); background: var(--surface);
}
.step.done { color: var(--ink-2); }
.step.done i { background: var(--green); border-color: var(--green); color: var(--surface); }
.step.now { color: var(--ink); font-weight: 600; }
.step.now i { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Мастер командировки */
.wiz-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.wiz-nav button {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); border-radius: var(--radius-sm);
  padding: 7px 12px; font-size: var(--fs-sm); display: inline-flex; gap: 8px; align-items: center;
}
.wiz-nav button[aria-current="step"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.wiz-nav .n { font-family: var(--ff-num); font-size: var(--fs-xs); }
.totals { display: grid; gap: 8px; }
.totals .tl { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-sm); }
.totals .tl.sum { border-top: 1px solid var(--line); padding-top: 9px; font-weight: 600; font-size: 15px; }

/* Окно: широкое, крестик слева от заголовка (правило портала 55) */
.ov {
  position: fixed; inset: 0; z-index: 200; background: color-mix(in srgb, #0a101a 45%, transparent);
  display: flex; align-items: flex-start; justify-content: center; overflow-y: auto;
  padding: calc(4vh + env(safe-area-inset-top, 0px)) 2% 4vh;
}
.md {
  width: 96%; max-width: 1180px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: 0 18px 48px rgba(10, 16, 26, .22);
}
.md.narrow { max-width: 720px; }
.md-hd {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
}
.md-hd h2 { margin: 0; font-size: 16px; flex: 1; min-width: 0; }
.md-x {
  width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-2); font-size: 18px; line-height: 1;
}
.md-x:hover { border-color: var(--red); color: var(--red); }
.md-bd { padding: 18px 16px; }
.md-ft { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); }

.toast-wrap { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 300; display: grid; gap: 8px; }
.toast { animation: tin .2s ease-out; }
@keyframes tin { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Дни рождения */
.bd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap); }
.bd {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
  display: grid; gap: 10px; align-content: start;
}
.bd-top { display: flex; gap: 12px; align-items: center; }
.ava {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 14px;
}
.bd-date { font-family: var(--ff-num); font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.bd-date small { font-size: var(--fs-xs); color: var(--ink-3); font-family: var(--ff); font-weight: 500; letter-spacing: 0; display: block; margin-top: 4px; }
.bd.today { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bd .checks { display: grid; gap: 4px; }
.months { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--gap); }
.month h3 { margin: 0 0 6px; }
.month ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: var(--fs-sm); }
.month li { display: flex; gap: 8px; }
.month li .num { color: var(--ink-3); width: 22px; flex: none; }
.month.cur { outline: 2px solid var(--accent-soft); border-radius: var(--radius); }

/* Лимит / прогресс */
.meter { height: 8px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--accent); }
.meter > span[data-s="amber"] { background: var(--amber); }
.meter > span[data-s="red"] { background: var(--red); }

.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: var(--fs-sm); margin: 0; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; }

.tbl td .sub { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.tbl tr.click { cursor: pointer; }
.toolbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 14px 0; }
.toolbar .input { width: auto; min-width: 180px; }
@media (max-width: 760px) { .toolbar .input { flex: 1 1 100%; } }
.count-pill {
  font-family: var(--ff-num); font-size: var(--fs-xs); background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink-3); border-radius: 9px; padding: 0 6px; margin-left: 4px;
}
.tab .count-pill { vertical-align: 1px; }
.home-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tile {
  display: grid; gap: 3px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink);
}
.tile:hover { border-color: var(--accent); text-decoration: none; }
.tile b { font-weight: 600; font-size: var(--fs-sm); }
.tile span { font-size: var(--fs-xs); color: var(--ink-3); }
.stack > .step + .step::before { display: none; }
.months { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tbl td.num .sub { font-family: var(--ff); font-variant-numeric: normal; }

/* ============================ ПОЧТА ============================ */
.bell.m55-b { font-size: 17px; line-height: 1; border: 1px solid transparent; background: none; }
.bell.m55-b.on { border-color: var(--accent); color: var(--accent); }
.m55-n { font: 700 var(--fs-xs) var(--ff-num); color: var(--ink-3); }
.m55-dr {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 150; width: 480px; max-width: 100vw;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: -12px 0 30px rgba(10, 16, 26, .16);
  display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px);
}
.m55-dr.wide { width: 880px; }
.m55-dh { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.m55-dh button, .m55-dh a {
  min-width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); display: inline-grid; place-items: center; font-size: 15px; text-decoration: none;
}
.m55-dh button:hover, .m55-dh a:hover { border-color: var(--accent); color: var(--accent); }
.m55-db { flex: 1; min-height: 0; display: flex; }
.m55-kp {
  position: absolute; top: 56px; right: 10px; width: 360px; max-width: calc(100% - 20px); z-index: 5; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; box-shadow: 0 12px 30px rgba(10, 16, 26, .2); font-size: var(--fs-sm);
}
.m55-kp table { border-collapse: collapse; margin: 8px 0 4px; width: 100%; }
.m55-kp td { padding: 4px 8px 4px 0; vertical-align: top; }
kbd { font: 600 11px var(--ff-num); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; background: var(--surface-2); }
@media (min-width: 1001px) {
  body.m55-docked { padding-right: 480px; }
  body.m55-docked-wide { padding-right: 880px; }
  body.m55-docked .m55-dr { box-shadow: none; }
}
@media (max-width: 1000px) { .m55-dock { display: none !important; } }
@media (max-width: 760px) { .m55-dr, .m55-dr.wide { width: 100vw; } .m55-wide { display: none !important; } }

.mx { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--surface); min-height: 0; }
.mx-hd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.mx-title { font-weight: 600; margin-right: 4px; }
.mx-box { width: auto; max-width: 240px; padding: 5px 8px; }
.mx-ib {
  min-width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font-size: 14px; display: inline-grid; place-items: center; padding: 0 6px;
}
.mx-ib:hover, .mx-ib.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.mx-chip {
  height: 32px; border-radius: 100px; border: 1px solid var(--line); background: var(--surface); padding: 0 11px;
  font-size: var(--fs-sm); color: var(--ink-2); display: inline-flex; gap: 5px; align-items: center;
}
.mx-chip b { font-family: var(--ff-num); }
.mx-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.mx-bd { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.mx-fold { display: none; flex-direction: column; gap: 1px; padding: 10px 8px; border-right: 1px solid var(--line); overflow-y: auto; }
.mx-fold button {
  display: flex; justify-content: space-between; gap: 8px; border: 0; background: none; text-align: left;
  padding: 7px 10px; border-radius: var(--radius-sm); color: var(--ink-2); font-size: var(--fs-sm);
}
.mx-fold button:hover { background: var(--surface-2); }
.mx-fold button[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.mx-n { font: 600 var(--fs-xs) var(--ff-num); color: var(--ink-3); }
.mx-list { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.mx-folder-sel { padding: 10px 12px 0; }
.mx-tools { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.mx-q { flex: 1; min-width: 0; }
.mx-rows { overflow-y: auto; flex: 1; }
.mx-row {
  display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 8px; padding: 10px 12px 10px 8px;
  border-bottom: 1px solid var(--line); cursor: pointer; border-left: 3px solid transparent;
}
.mx-row:hover { background: var(--surface-2); }
.mx-row.sel { border-left-color: var(--line-2); }
.mx-row.open { background: var(--accent-soft); border-left-color: var(--accent); }
.mx-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; }
.mx-row.unread .mx-dot { background: var(--accent); }
.mx-l1 { display: flex; gap: 6px; align-items: baseline; }
.mx-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.mx-row.unread .mx-from { font-weight: 700; color: var(--ink); }
.mx-date { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-3); flex: none; }
.mx-hot, .mx-clip { font-size: 12px; flex: none; }
.mx-subj { font-weight: 500; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-row.unread .mx-subj { font-weight: 700; }
.mx-snip { font-size: var(--fs-xs); color: var(--ink-3); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 2px; }
.mx-l3 { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.mx-l3:empty { display: none; }
.mx-tag, .mx-own {
  font-size: var(--fs-xs); border-radius: 100px; padding: 1px 8px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mx-tag { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.mx-tag[data-k="hr"], .mx-tag[data-k="doc"] { background: var(--amber-soft); color: var(--amber); }
.mx-own.nobody { color: var(--red); border-color: color-mix(in srgb, var(--red) 30%, transparent); background: var(--red-soft); }
.mx-read { display: none; overflow-y: auto; min-width: 0; padding: 14px 16px 24px; }
.mx-ph { height: 100%; display: grid; place-items: center; text-align: center; color: var(--ink-3); }
.mx-rhd { display: flex; gap: 10px; align-items: flex-start; }
.mx-rt { min-width: 0; flex: 1; }
.mx-rt h2 { margin: 2px 0 10px; font-size: 17px; text-wrap: balance; }
.mx-meta { display: flex; gap: 10px; align-items: center; font-size: var(--fs-sm); }
.mx-meta .ava { width: 34px; height: 34px; font-size: 12px; }
.mx-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 14px 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mx-rec {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); font-size: var(--fs-sm);
}
.mx-rec[data-k="hr"], .mx-rec[data-k="doc"] { background: var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.mx-rec.none { background: var(--surface-2); border-color: var(--line); }
.mx-text { margin: 16px 0; line-height: 1.6; max-width: 70ch; }
.mx-att { display: grid; gap: 8px; }

/* шторка узкая: список ИЛИ письмо */
.m55-dr .mx[data-reading="1"] .mx-list { display: none; }
.m55-dr .mx[data-reading="1"] .mx-read { display: block; }
/* шторка широкая: список + письмо */
.m55-dr.wide .mx-bd { grid-template-columns: 340px minmax(0, 1fr); }
.m55-dr.wide .mx-list { display: flex !important; border-right: 1px solid var(--line); }
.m55-dr.wide .mx-read { display: block; }
.m55-dr.wide .mx-back { display: none; }
/* во всё окно: папки + список + письмо */
.mx-page { height: calc(100vh - 160px); min-height: 520px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; }
.mx-page .mx-bd { grid-template-columns: 200px 380px minmax(0, 1fr); }
.mx-page .mx-fold { display: flex; }
.mx-page .mx-folder-sel { display: none; }
.mx-page .mx-list { border-right: 1px solid var(--line); }
.mx-page .mx-read { display: block; }
.mx-page .mx-back { display: none; }
@media (max-width: 1200px) {
  .mx-page .mx-bd { grid-template-columns: 340px minmax(0, 1fr); }
  .mx-page .mx-fold { display: none; }
  .mx-page .mx-folder-sel { display: block; }
}
@media (max-width: 760px) {
  .mx-page { height: auto; min-height: 70vh; }
  .mx-page .mx-bd { grid-template-columns: minmax(0, 1fr); }
  .mx-page .mx-list { border-right: 0; }
  .mx-page .mx-read { display: none; }
  .mx-page .mx[data-reading="1"] .mx-list, .mx-page[data-reading="1"] .mx-list { display: none; }
  .mx-page[data-reading="1"] .mx-read { display: block; }
  .mx-page .mx-back { display: inline-grid; }
}
.mx-title { display: none; }