/* Version 2 design system — docs/proto-v2/01-design.md (UI kit +styles.png, tab colors from the real cabinet).
   This file is connected LAST in index.html: it defines the tokens and re-draws the kit components,
   so its rules win over rbac.css / layout.css / editor.css without !important. */

:root {
  /* § 1 fonts: only four sizes */
  --fs-h1: 26px;   --lh-h1: 30px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-tiny: 11px;
  --lh: 20px;
  --font-body: Roboto, ubunturegular, Ubuntu, sans-serif;
  --font-h1: "SF Pro Display", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;

  /* § 2 colors: only the kit palette */
  --c-text: #253140;
  --c-text-2: #5d6978;
  --c-line: #d3dae1;
  --c-border: #ccd3db;
  --c-field: #f2f4f6;
  --c-white: #ffffff;
  --c-link: #36bed9;
  --c-link-hover: #49d6f2;
  --c-green: #54b772;
  --c-green-press: #4d995a;
  --c-pink: #fb4e72;
  --c-pink-press: #d94174;
  --c-dark: #5d6978;
  --c-warn-icon: #ffbf00;
  --c-err-icon: #f26179;
  --c-overlay: rgba(37, 49, 64, .45);
}

/* § 4 buttons: 40px high, Roboto 15/20, icon 14px, icon buttons exactly 40×40 */
body.lk #view .button, body.lk #modal-root .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; box-sizing: border-box; padding: 0 20px;
  font: 400 var(--fs-body)/var(--lh) var(--font-body);
  border-radius: 20px; text-decoration: none;
}
body.lk #view .button i.fa, body.lk #modal-root .button i.fa { font-size: 14px; }
body.lk .rb-icon-btn {
  width: 40px; height: 40px; min-width: 40px; min-height: 40px;
  padding: 0; gap: 0; border-radius: 50%; box-sizing: border-box;
}
body.lk .rb-icon-btn i.fa { font-size: 14px; }
/* #view beats the generic .button padding of this file (an ID selector wins) */
body.lk #view .rb-icon-btn, body.lk #modal-root .rb-icon-btn {
  width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0; gap: 0;
  border-radius: 50%; box-sizing: border-box;
}

/* § 5 fields and lists */
body.lk .rb-input {
  height: 40px; box-sizing: border-box; border: 2px solid transparent; border-radius: 20px;
  background: var(--c-field); padding: 0 16px; color: var(--c-text);
  font: 400 var(--fs-body)/var(--lh) var(--font-body);
}
body.lk input.rb-input.rb-input-sm { height: 32px; border-radius: 16px; padding: 0 16px; font-size: var(--fs-small); }
body.lk select.rb-select {
  height: 40px; box-sizing: border-box; border: 0; border-radius: 20px; appearance: none; -webkit-appearance: none;
  background: var(--c-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235d6978'%3E%3Cpath fill-rule='evenodd' d='M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat right 16px center;
  padding: 0 48px 0 16px; color: var(--c-text); cursor: pointer;
  font: 400 var(--fs-body)/var(--lh) var(--font-body);
}
body.lk select.rb-select:hover, body.lk select.rb-select:focus { background-color: var(--c-line); }
body.lk select.rb-select.rb-select-sm {
  height: 32px; width: 168px; border-radius: 16px; font-size: var(--fs-small);
  padding: 0 36px 0 12px; background-position: right 12px center;
}

/* § 6 kit checkbox and radio: native, appearance none */
body.lk input.rb-cb[type="checkbox"], body.lk input.rb-radio[type="radio"] {
  display: inline-block; visibility: visible; opacity: 1; position: static;
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0; cursor: pointer;
  width: 20px; height: 20px; min-width: 20px; min-height: 20px; box-sizing: border-box; border: 0;
  background-color: var(--c-field); box-shadow: inset 0 2px 0 var(--c-line);
  vertical-align: middle; flex: none;
}
body.lk input.rb-cb[type="checkbox"] { border-radius: 2px; }
body.lk input.rb-radio[type="radio"] { border-radius: 50%; }
body.lk input.rb-cb[type="checkbox"]:checked {
  background-color: var(--c-link); box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 14px 14px;
}
body.lk input.rb-cb[type="checkbox"]:indeterminate {
  background-color: var(--c-link); box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' d='M4 8h8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 14px 14px;
}
body.lk input.rb-radio[type="radio"]:checked { border: 7px solid var(--c-link); background-color: var(--c-field); box-shadow: none; }
body.lk input.rb-cb:disabled, body.lk input.rb-radio:disabled { opacity: .45; cursor: not-allowed; }
.rb-cb-hit { min-width: 24px; min-height: 24px; }

/* § 7 tabs like the real cabinet (Screenshot 2026-10-23 at 08.13.25.png) */
body.lk [role="tab"] {
  display: inline-flex; align-items: center; height: 32px; box-sizing: border-box; padding: 0 16px;
  border: 1px solid var(--c-border); border-radius: 16px; background: var(--c-white); color: var(--c-text);
  font: 400 var(--fs-body)/var(--lh) var(--font-body); cursor: pointer; white-space: nowrap;
}
body.lk [role="tab"]:hover, body.lk [role="tab"][aria-selected="true"] {
  background: var(--c-pink); border-color: var(--c-pink); color: var(--c-white); font-weight: 400;
}

/* § 8 keyboard focus everywhere: 2px dark outline, 2px offset (cyan stays only as the field border) */
body.lk :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--c-text); outline-offset: 2px;
}

/* § 9 notices, statuses, toast, impersonation bar */
body.lk .rb-notice {
  display: flex; gap: 12px; background: var(--c-field); border-radius: 6px; padding: 12px 16px;
  font: 400 var(--fs-small)/var(--lh) var(--font-body); color: var(--c-text);
}
body.lk .rb-notice .fa { margin-top: 4px; color: var(--c-pink); }
body.lk .rb-notice-ok .fa { color: var(--c-green); }
body.lk .rb-status {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font: 400 var(--fs-small)/var(--lh) var(--font-body); color: var(--c-text);
}
body.lk .rb-status i.fa { font-size: 13px; }
body.lk .rb-status-ok i.fa { color: var(--c-green); }
body.lk .rb-status-wait i.fa { color: var(--c-warn-icon); }
body.lk .rb-status-err i.fa { color: var(--c-err-icon); }
body.lk .rb-toast {
  background: var(--c-text); color: var(--c-white); border-radius: 20px; padding: 12px 20px;
  font: 400 var(--fs-small)/var(--lh) var(--font-body);
}
body.lk .rb-impersonation {
  background: var(--c-text); color: var(--c-white); border-radius: 6px; padding: 12px 16px;
  font: 400 var(--fs-small)/var(--lh) var(--font-body);
}
body.lk .rb-impersonation i.fa { color: var(--c-warn-icon); }
body.lk .rb-impersonation .rb-imp-exit { background: var(--c-white); color: var(--c-text); border-color: var(--c-white); }

/* § 10 modal window: 480px, 32px padding, radius 8, title 26/30 without a person's name */
body.lk .rb-overlay { background: var(--c-overlay); }
body.lk .rb-modal {
  max-width: 480px; padding: 32px; border-radius: 8px; background: var(--c-white); color: var(--c-text);
  font: 400 var(--fs-body)/var(--lh) var(--font-body);
}
body.lk .rb-modal h3 { margin: 0 0 16px; color: var(--c-text); font: 400 var(--fs-h1)/var(--lh-h1) var(--font-h1); }
body.lk .rb-close {
  width: 40px; height: 40px; right: 8px; top: 8px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--c-text-2);
}
body.lk .rb-close:hover { color: var(--c-link-hover); }
body.lk .rb-modal-actions { gap: 12px; margin-top: 24px; }

/* Headings of pages and cards: only 26/30 (§ 1) */
body.lk .rb-ed-head h3, body.lk .rb-sec-page h3, body.lk .rb-card-title {
  margin: 0; color: var(--c-text); font: 400 var(--fs-h1)/var(--lh-h1) var(--font-h1);
}

/* «Команда → Аккаунты» table (docs/proto-v2/02-accounts.md § 2–7).
   Column widths live in <colgroup> in accounts.js; layout.css sets nothing for this table any more. */
.rb-members col.rb-col-cb { width: 36px; }
.rb-members col.rb-col-acc { width: auto; }   /* остаток, не меньше 220px */
.rb-members col.rb-col-sec { width: 148px; }
.rb-members col.rb-col-bal { width: 108px; }
.rb-members col.rb-col-spend { width: 168px; }
.rb-members col.rb-col-lim { width: 148px; }
.rb-members col.rb-col-act { width: 100px; }
/* !important is needed: layout.css sets the global «Tables: full text wrapping» rule with a higher specificity */
table.contacts-table.sms-table.rb-members thead th {
  padding: 8px; white-space: nowrap !important; vertical-align: middle !important;
  font: 400 var(--fs-tiny)/var(--lh) var(--font-body); color: var(--c-text-2);
}
.rb-members .rb-cb-th { width: 36px; text-align: center; padding: 8px 4px !important; }
.rb-members .rb-num-th { text-align: right; }
.rb-members .rb-sort { font: inherit; color: inherit; }
table.contacts-table.sms-table.rb-members tbody td {
  padding: 12px 8px; vertical-align: top; border-bottom: 1px solid var(--c-line);
}
.rb-members tbody tr:hover, .rb-members tbody tr.rb-sel { background: var(--c-field); }
body.lk .rb-badge { background: var(--c-field); color: var(--c-text); }
/* § 2.1 sorting bar above the table */
.rb-tablebar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 16px 0; }
.rb-sort-label { font: 400 var(--fs-small)/var(--lh) var(--font-body); color: var(--c-text-2); }
/* § 3 the account cell */
.rb-acc-name { font: 400 var(--fs-body)/var(--lh) var(--font-body); color: var(--c-link); overflow-wrap: break-word; }
.rb-acc-name:hover { color: var(--c-link-hover); }
.rb-joined { color: var(--c-text-2); }
/* the invited status is long («…действует еще 41 ч»): it wraps by words so the table keeps its 1020px;
   body.lk is needed to beat the kit rule body.lk .rb-status { white-space: nowrap } */
body.lk .rb-acc-role .rb-status { white-space: normal; }
/* § 4 the security cell: three one-line items, the full text in title */
.rb-sec-line { white-space: nowrap; }
.rb-sec-line .fa { font-size: 13px; }
.rb-sec-ok { color: var(--c-green); }
.rb-sec-wait { color: var(--c-warn-icon); }
/* § 5 money and limits: numbers right, tabular, never break */
table.contacts-table.sms-table.rb-members td.rb-num, table.contacts-table.sms-table.rb-members td[data-label="Лимит SMS"] {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap !important;
}
.rb-spend { display: grid; grid-template-columns: auto auto; column-gap: 8px; justify-content: end; }
.rb-spend-l { text-align: left; font: 400 var(--fs-small)/var(--lh) var(--font-body); color: var(--c-text-2); }
.rb-spend-n { text-align: right; font: 400 var(--fs-small)/var(--lh) var(--font-body); color: var(--c-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rb-lim { display: grid; grid-template-columns: auto auto; column-gap: 4px; justify-content: end; }
.rb-lim-n { text-align: right; font-variant-numeric: tabular-nums; }
.rb-lim-u { text-align: left; color: var(--c-text-2); }
.rb-lim-none { text-align: right; font: 400 var(--fs-small)/var(--lh) var(--font-body); color: var(--c-text-2); }
.rb-lim-stop { display: flex; margin-top: 4px; }
.rb-lim-link { display: block; color: inherit; text-decoration: none; }
.rb-lim-link:hover .rb-lim-n, .rb-lim-link:hover .rb-lim-u, .rb-lim-link:hover .rb-sub { color: var(--c-link); }
/* § 2/§ 6 the action column: content centered («Выравнивание: центр»), icon buttons in a 2-column grid inside a div */
.rb-members .rb-act-th { text-align: center; }
.rb-members td.rb-acts { display: table-cell; text-align: center; }
.rb-acts-grid { display: inline-grid; grid-template-columns: repeat(2, 40px); gap: 4px; justify-content: center; vertical-align: top; }
.rb-members td.rb-acts > .rb-sub { text-align: center; }  /* «—» у владельца */

@media (max-width: 767px) {
  .rb-members td.rb-num, .rb-members td[data-label="Лимит SMS"] { justify-items: end; }  /* § 9: numbers to the right edge of the card */
  .rb-acc-name { display: inline-block; padding: 12px 0; }  /* 44px tap zone on the phone */
  .rb-tablebar { flex-direction: column; align-items: stretch; gap: 4px; }
  .rb-tablebar select#acc-sort { width: 100%; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .rb-members { table-layout: auto; }  /* the colgroup widths; .table-lk would force fixed */
  .rb-table-wrap .rb-members { min-width: 1012px; }
}

/* Limits tab (03-card.md § 4) */
.rb-limits-tab { padding: 0; margin: 0; }
.rb-limits-intro { margin: 0 0 16px; }
.rb-limits-title { font: 500 var(--fs-body)/var(--lh) var(--font-body); color: var(--c-text); margin: 0 0 4px; }
.rb-limits-desc { font: 400 var(--fs-small)/var(--lh) var(--font-body); color: var(--c-text-2); margin: 0 0 16px; }
.rb-sec-head-static { cursor: default; }
.rb-unit-field { position: relative; width: 168px; display: inline-flex; align-items: center; justify-content: flex-end; }
body.lk input.rb-input.rb-input-sm { font-variant-numeric: tabular-nums; }
body.lk .rb-unit-field input.rb-input.rb-input-sm { width: 168px; box-sizing: border-box; text-align: right; padding-right: 40px; }
.rb-unit { position: absolute; right: 12px; font: 400 var(--fs-small)/var(--lh) var(--font-body); color: var(--c-text-2); pointer-events: none; }
.rb-err { font: 400 var(--fs-tiny)/var(--lh) var(--font-body); color: var(--c-pink); margin-top: 4px; }
body.lk input.rb-input.rb-input-err { border-color: var(--c-pink); }