:root{
  /* --- Teleraptor-like light theme (default) --- */
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel2: #f1f3f6;
  --text: #0f172a;
  --muted: #7b889e;
  --border: #e7ebf2;
  --shadow: 0 1px 0 rgba(16,24,40,.04), 0 1px 6px rgba(16,24,40,.06);

  --brand: #376fd0;
  --brand2: #2f66c9;
  --violet: #7c3aed;
  --danger: #e14b4b;
  --ok: #16a34a;
  --warn: #f59e0b;

  --radius: 12px;
  --radius-sm: 10px;

  --sidebar-bg: #293042;
  --sidebar-border: rgba(255,255,255,.09);
  --sidebar-text: rgba(255,255,255,.88);
  --sidebar-muted: rgba(255,255,255,.55);
  --sidebar-hover: rgba(255,255,255,.07);
  --sidebar-active: rgba(255,255,255,.10);

  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --sidebar-w: 280px;
}

[data-theme="dark"]{
  /* Dark theme keeps the same layout but inverts surfaces */
  --bg: #0f1422;
  --panel: #111a2a;
  --panel2: #0f1726;
  --text: #e7edf8;
  --muted: #a7b4cc;
  --border: rgba(231,235,242,.14);
  --shadow: 0 1px 0 rgba(0,0,0,.22), 0 12px 28px rgba(0,0,0,.35);

  --sidebar-bg: #0b1020;
  --sidebar-border: rgba(255,255,255,.08);
  --sidebar-hover: rgba(255,255,255,.06);
  --sidebar-active: rgba(55,111,208,.18);

  --violet: #a78bfa;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
}
a{color:inherit}

.muted{color:var(--muted)}
.center{min-height:calc(100vh - 64px); display:flex; align-items:center; justify-content:center; padding:18px}
.error{margin-top:10px;color:var(--danger)}
.note{margin:12px 0; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--muted); background:var(--panel)}

.is-hidden{display:none !important}

/* Small dropdown menu (used in Leads settings) */
.dropdown{position:relative;display:inline-block}
.menu{
  position:absolute;
  right:0;
  top:44px;
  min-width:260px;
  padding:12px;
  border:1px solid var(--border);

  /* FIX: было var(--card), которого нет -> становилось прозрачным */
  background:var(--panel);

  color:var(--text);
  border-radius:12px;
  box-shadow:var(--shadow);
  z-index:80;
}
.menu__title{font-size:12px;color:var(--muted);margin:6px 0}
.menu__divider{height:1px;background:var(--border);margin:10px 0}
.menu__item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0}
.menu__check{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.menu__check input{width:16px;height:16px}
.lead-lastmsg{cursor:pointer}
.hint{margin-top:12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--panel2);font-family:var(--mono); font-size:12px; color:var(--muted)}

/* --- Topbar (used mainly for login) --- */
.topbar{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
}

/* Hide the topbar in the main app to match the reference (sidebar-first layout) */
body.authed .topbar{display:none}
body.authed .layout{min-height:100vh}
body.authed .sidebar{height:100vh; top:0}
.brand{display:flex; gap:12px; align-items:center}
.brand__logo{
  width:124px;height:44px;
  padding:8px 12px;
  border-radius:14px;
  display:grid;place-items:center;
  background:var(--sidebar-bg);
  box-shadow:var(--shadow);
}
.brand__logo img,
.sidebrand__logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.brand__name{font-weight:900; letter-spacing:.2px}
.brand__sub{font-size:12px; color:var(--muted)}
.topbar__right{display:flex;align-items:center;gap:10px}

/* --- Layout --- */
.layout{display:flex; min-height:calc(100vh - 64px);}
.sidebar{
  width:var(--sidebar-w);
  background:var(--sidebar-bg);
  border-right:1px solid var(--sidebar-border);
  color:var(--sidebar-text);
  padding:14px 14px 10px;
  position:sticky;
  top:0;
  height:calc(100vh - 64px);
  overflow:auto;
}

/* Collapsed sidebar (like the chevron in the screenshot) */
body.sidebar-collapsed .sidebar{width:78px}
body.sidebar-collapsed .sidebrand__text,
body.sidebar-collapsed .navgroup__title,
body.sidebar-collapsed .navbtn__label,
body.sidebar-collapsed .sidebar__footer .muted,
body.sidebar-collapsed .userchip,
body.sidebar-collapsed .sideaction__label{display:none !important}
body.sidebar-collapsed .navbtn{justify-content:center}
body.sidebar-collapsed .navbtn__icon{color:#fff}
.content{
  flex:1;
  min-width:0;
  padding:18px 18px 24px;
}

/* When app is shown, we keep the topbar but the style is primarily the sidebar */

/* --- Sidebar header (logo like in screenshot) --- */
.sidehead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:18px;
}
.sidebrand{display:flex; gap:10px; align-items:center;}
.sidebrand__logo{
  width:172px;
  height:54px;
  padding:0;
  border-radius:0;
  background:transparent;
  border:0;
  display:grid;
  place-items:center;
  color:#fff;
}
.sidebrand__text{display:flex; flex-direction:column; line-height:1.05;}
.sidebrand__name{font-weight:900; letter-spacing:.4px; font-size:18px; text-transform:uppercase;}
.sidebrand__sub{font-size:12px; color:var(--sidebar-muted)}
body.sidebar-collapsed .sidebrand__logo{
  width:46px;
  height:46px;
  padding:8px;
}

.sidecollapse{
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--sidebar-text);
  cursor:pointer;
  display:grid;
  place-items:center;
}
.sidecollapse:hover{background:rgba(255,255,255,.09)}

/* --- Sidebar nav --- */
.navgroup{margin-top:10px;}
.navgroup__title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  color:var(--sidebar-muted);
  font-weight:800;
  text-transform:none;
  letter-spacing:.2px;
  margin:10px 6px 8px;
}
.divider{height:1px;background:rgba(255,255,255,.10); margin:12px 0}

.navbtn{
  width:100%;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  color:var(--sidebar-text);
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
}
.navbtn__icon{width:20px;height:20px; display:inline-grid; place-items:center; color:var(--sidebar-muted)}
.navbtn__icon svg{width:20px;height:20px}
.navbtn__label{flex:1; text-align:left}
.navbtn:hover{background:var(--sidebar-hover)}
.navbtn.active{background:var(--sidebar-active)}
.navbtn.active .navbtn__icon{color:#fff}

/* --- Sidebar footer buttons --- */
.sidebar__footer{margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.10)}
.userchip{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  display:flex;
  flex-direction:column;
  line-height:1.15;
}
.userchip__name{font-weight:900;font-size:13px;color:#fff}
.userchip__role{font-size:12px;color:var(--sidebar-muted)}
.sideactions{display:flex; flex-direction:column; gap:10px; margin-top:10px}
.sideaction{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  background:transparent;
  border:1px solid rgba(55,111,208,.55);
  color:#eaf2ff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:800;
}
.sideaction:hover{background:rgba(55,111,208,.10)}
.sideaction__label{font-size:13px}

/* --- Tabs & content wrappers --- */
.tab{background:transparent; border:0; padding:0}
.tabhead{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
h1,h2,h3,h4{margin:0 0 10px 0}
.tabhead h2{margin:0; font-weight:900}
.tabhead__right{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}

/* --- Inputs & buttons --- */
.label{font-size:12px; color:var(--muted); margin-bottom:4px}
.input{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  outline:none;
}
.input:focus{border-color:rgba(55,111,208,.55); box-shadow:0 0 0 4px rgba(55,111,208,.12)}
.input--sm{padding:8px 10px; border-radius:10px; font-size:13px}

/* --- Date field with calendar button (Tasks: DD/MM/YYYY input + picker icon) --- */
.datefield{display:flex; align-items:center; gap:8px; position:relative}
.datefield .input{flex:1 1 auto; min-width:0}
.datefield__btn{
    position:relative;
  z-index:1;
width:44px;
  height:44px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel2);
  cursor:pointer;
  display:grid;
  place-items:center;
  color:var(--muted);
}
.datefield__btn:hover{background:#e9edf4; color:var(--text)}
.datefield__btn svg{width:18px; height:18px}
.datefield__picker{position:absolute; right:0; top:0; width:44px; height:44px; opacity:0; cursor:pointer; z-index:2}

/* --- Mini square field (Тел [ ]) in lead card --- */
.label--split{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.label__tel{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}
.input--square{
  width:44px;
  min-width:44px;
  max-width:44px;
  height:44px;
  padding:0;
  text-align:center;
  border-radius:10px;
}
.input--tel{
  font-weight:900;
}
textarea.input{resize:vertical}

.btn{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  cursor:pointer;
  font-weight:800;
}
.btn:hover{filter:brightness(.99)}
.btn--primary{
  background:var(--brand);
  border-color:rgba(55,111,208,.35);
  color:white;
  box-shadow:0 8px 18px rgba(55,111,208,.18);
}
.btn--danger{
  background:rgba(225,75,75,.10);
  border-color:rgba(225,75,75,.30);
  color:var(--danger);
}
.btn--ghost{background:transparent}
.btn--sm{padding:8px 10px; border-radius:10px}

/* --- Segmented control (used in Tasks / Messages tabs) --- */
.segmented{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel2);
}
.seg{
  border:0;
  background:transparent;
  color:var(--muted);
  font-weight:900;
  font-size:13px;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  white-space:nowrap;
}
.seg:hover{color:var(--text)}
.seg.active{
  background:var(--panel);
  color:var(--text);
  box-shadow:0 1px 0 rgba(16,24,40,.06), 0 2px 10px rgba(16,24,40,.08);
  border:1px solid rgba(55,111,208,.25);
}

.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.grid2{display:grid; grid-template-columns:1.1fr 1fr; gap:12px}

/* --- Metric cards (top row like screenshot) --- */
.metricsbar{
  display:flex;
  align-items:stretch;
  gap:12px;
  margin-bottom:14px;
}
.metriccard{
  min-width:160px;
  flex:1;
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:12px;
  padding:14px 14px;
  box-shadow:var(--shadow);
  text-align:left;
  cursor:pointer;
}
.metriccard[disabled]{cursor:default; opacity:.75}
.metriccard__num{font-weight:900; font-size:26px; line-height:1.0}
.metriccard__label{margin-top:6px; font-size:12px; color:var(--muted)}
.metriccard.active{border-color:rgba(55,111,208,.95); box-shadow:0 0 0 1px rgba(55,111,208,.2), var(--shadow)}

.gearbtn{
  width:44px;
  min-width:44px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  box-shadow:var(--shadow);
  display:grid;
  place-items:center;
  cursor:pointer;
  color:var(--muted);
}
.gearbtn:hover{color:var(--text)}
.gearbtn svg{width:18px;height:18px}

/* --- Panels like in screenshot --- */
.panel{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.panel--toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  margin-bottom:12px;
}
.panel--table{padding:0;}
.panel__meta{font-size:12px; color:var(--muted)}

.iconbar{display:flex; gap:8px; align-items:center}
.iconbtn{
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid transparent;
  background:var(--panel2);
  cursor:pointer;
  display:grid;
  place-items:center;
  color:var(--muted);
}
.iconbtn svg{width:18px;height:18px}
.iconbtn:hover{background:#e9edf4; color:var(--text)}
.iconbtn:disabled{opacity:.55; cursor:not-allowed}
.iconbtn--danger{background:rgba(225,75,75,.08); border-color:rgba(225,75,75,.22); color:var(--danger)}

/* --- Filters row like screenshot --- */
.filtersbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border-bottom:1px solid var(--border);
  background:var(--panel);
}
.filtersbar__left{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.filtersbar__right{display:flex; gap:10px; align-items:center}

.filterchip{
  border:1px solid var(--border);
  background:var(--panel2);
  padding:8px 10px;
  border-radius:10px;
  font-weight:800;
  font-size:13px;
  color:var(--text);
  cursor:pointer;
}
.filterchip:disabled{cursor:not-allowed; opacity:.7}

.searchbox{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel);
  min-width:280px;
}
.searchbox__icon{width:18px;height:18px;color:var(--muted)}
.searchbox__input{
  border:0;
  outline:none;
  background:transparent;
  width:100%;
  font-size:13px;
  color:var(--text);
}
.searchbox__input::placeholder{color:color-mix(in srgb, var(--muted) 85%, transparent)}

.hintline{padding:10px 12px; border-bottom:1px solid var(--border); color:var(--muted); font-size:12px}

/* --- Table --- */
.tablewrap{overflow:auto; max-width:100%; -webkit-overflow-scrolling:touch;}
.table{width:100%; border-collapse:separate; border-spacing:0; min-width:980px; background:var(--panel)}
.table thead th{
  position:sticky; top:0;
  background:#f3f5f8;
  color:#6d7b92;
  font-size:12px;
  font-weight:800;
  text-align:left;
  padding:12px 12px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.tableSortBtn{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:800;
  padding:0;
  cursor:pointer;
}
.tableSortBtn:hover,
.tableSortBtn.is-active{
  color:var(--brand);
}
.table tbody td{
  padding:12px 12px;
  border-bottom:1px solid var(--border);
  vertical-align:middle;
  white-space:nowrap;
}
.table tbody tr:hover{background:rgba(55,111,208,.04)}
.table tbody tr.user-created-old td{
  background:rgba(34,197,94,.08);
}
.table tbody tr.user-created-old:hover td{
  background:rgba(34,197,94,.12);
}
.usersTeamPicker{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 10px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--panel2);
}
.usersTeamChip{
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  border-radius:10px;
  padding:7px 10px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}
.usersTeamChip:hover,
.usersTeamChip.active,
#usersRittenTeamsBtn.active{
  border-color:rgba(55,111,208,.32);
  background:rgba(55,111,208,.10);
  color:var(--brand);
}
.usersTeamChip span{
  color:var(--muted);
  font-weight:800;
  margin-left:4px;
}

/* --- Leads list: responsive without hiding values --- */
/*
  Goal: keep the list readable.
  - No ellipsis for most columns (show full values, allow wrapping).
  - Ellipsis only for the comment/message column.
  - Table can still scroll horizontally as a fallback via .tablewrap.
*/
#leadsTable{table-layout:fixed; min-width:1280px;}

/* Show full values (wrap) by default */
#leadsTable tbody td{white-space:normal; word-break:break-word;}

/* Only the message/comment column uses ellipsis */
#leadsTable th[data-col="last_message"],
#leadsTable td[data-col="last_message"]{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Column widths tuned for readability */
#leadsTable th[data-col="phone"], #leadsTable td[data-col="phone"]{width:150px; white-space:nowrap;}
#leadsTable th[data-col="full_name"], #leadsTable td[data-col="full_name"]{width:220px;}
#leadsTable th[data-col="profession"], #leadsTable td[data-col="profession"]{width:170px;}
#leadsTable th[data-col="source"], #leadsTable td[data-col="source"]{width:160px;}
#leadsTable th[data-col="messenger"], #leadsTable td[data-col="messenger"]{width:120px;}
#leadsTable th[data-col="last_message"], #leadsTable td[data-col="last_message"]{width:240px;}
#leadsTable th[data-col="status"], #leadsTable td[data-col="status"]{width:220px; white-space:normal;}
#leadsTable th[data-col="ritten"], #leadsTable td[data-col="ritten"]{width:160px;}
#leadsTable th[data-col="employee"], #leadsTable td[data-col="employee"]{width:160px;}
#leadsTable th[data-col="dupes"], #leadsTable td[data-col="dupes"]{width:80px; white-space:nowrap;}
#leadsTable th[data-col="updated"], #leadsTable td[data-col="updated"]{width:120px; white-space:nowrap;}
#leadsTable th.table-fill,
#leadsTable td.table-fill{
  width:auto;
  min-width:0;
  padding-left:0;
  padding-right:0;
}

/* Slightly tighten spacing on smaller screens */
@media (max-width: 1200px){
  #leadsTable thead th, #leadsTable tbody td{padding:10px 10px;}
  #leadsTable th[data-col="full_name"], #leadsTable td[data-col="full_name"]{width:190px;}
  #leadsTable th[data-col="profession"], #leadsTable td[data-col="profession"]{width:150px;}
  #leadsTable th[data-col="ritten"], #leadsTable td[data-col="ritten"]{width:140px;}
  #leadsTable th[data-col="employee"], #leadsTable td[data-col="employee"]{width:140px;}
}
.table .link{color:var(--brand); font-weight:900; cursor:pointer; text-decoration:none}
.table .dim{color:var(--muted)}

#sourcesTable{
  table-layout:fixed;
  min-width:1380px;
}
#sourcesTable thead th,
#sourcesTable tbody td{
  padding:10px 12px;
}
#sourcesTable thead th{
  white-space:nowrap;
  line-height:1.2;
}
#sourcesTable th:nth-child(2),
#sourcesTable td:nth-child(2){
  width:220px;
  white-space:normal;
  word-break:break-word;
}
#sourcesTable thead th:not(:first-child):not(:nth-child(2)):not(.js-source-actions-head),
#sourcesTable tbody td:not(:first-child):not(:nth-child(2)):not(.js-source-actions-cell){
  width:104px;
  text-align:right;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
#sourcesTable thead th.js-source-actions-head,
#sourcesTable tbody td.js-source-actions-cell{
  width:110px;
  text-align:right;
  white-space:nowrap;
}
#sourcesTable tbody tr[data-source-key]{
  cursor:pointer;
}
#sourcesTable tbody tr.sourcesTable__row--selected{
  background:rgba(55,111,208,.08);
}
#sourcesTable tbody tr.sourcesTable__row--selected:hover{
  background:rgba(55,111,208,.12);
}

#issueHistoryTable{
  table-layout:fixed;
  min-width:0;
}
#issueHistoryTable thead th,
#issueHistoryTable tbody td{
  padding:10px 8px;
}
#issueHistoryTable th:nth-child(1),
#issueHistoryTable td:nth-child(1){
  width:210px;
}
#issueHistoryTable th:nth-child(2),
#issueHistoryTable td:nth-child(2){
  width:auto;
}
#issueHistoryTable th:nth-child(3),
#issueHistoryTable td:nth-child(3){
  width:84px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
#issueHistoryTable th:nth-child(4),
#issueHistoryTable td:nth-child(4){
  width:220px;
}
.issueHistoryTable__count{
  font-weight:900;
  color:var(--text);
}
.issueHistoryTable__meta{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}


/* --- Links --- */
/* Used across the app (tables + lead cards + duplicates). */
.link{color:var(--brand); font-weight:900; cursor:pointer; text-decoration:none}
.link:hover{text-decoration:underline}


/* --- Small badges/pills --- */
.pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel2);
  font-weight:800;
  font-size:12px;
}
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel2);
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}
.badge--brand{border-color:rgba(55,111,208,.25); background:rgba(55,111,208,.10); color:var(--brand)}
.badge--violet{border-color:rgba(124,58,237,.28); background:rgba(124,58,237,.12); color:var(--violet)}
.badge--warn{border-color:rgba(245,158,11,.30); background:rgba(245,158,11,.12); color:var(--warn)}
.badge--danger{border-color:rgba(225,75,75,.30); background:rgba(225,75,75,.12); color:var(--danger)}

/* --- Admin statuses module tweaks --- */
/* Keep preview + hex in one line to avoid vertical drift in the color column. */
.status-color-row{flex-wrap:nowrap}
.status-color-preview{line-height:1}

/* --- Extra lead status colors (Update #5) --- */
/* light-green ("Принять") */
.badge--greenLight{border-color:rgba(34,197,94,.32); background:rgba(34,197,94,.12); color:#22c55e}
/* green ("Депозит") */
.badge--green{border-color:rgba(22,163,74,.34); background:rgba(22,163,74,.14); color:var(--ok)}
/* dark-green ("Передан юристу") */
.badge--greenDark{border-color:rgba(4,120,87,.32); background:rgba(4,120,87,.12); color:#047857}

/* light-blue ("На распечатке") */
.badge--blueLight{border-color:rgba(59,130,246,.28); background:rgba(59,130,246,.12); color:#3b82f6}
/* dark-blue ("На выписке") */
.badge--blueDark{border-color:rgba(29,78,216,.28); background:rgba(29,78,216,.12); color:#1d4ed8}

/* brown ("Слит на выписке") */
.badge--brown{border-color:rgba(120,53,15,.28); background:rgba(120,53,15,.12); color:#78350f}

/* --- Cards (generic) --- */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:14px;
  margin-bottom:14px;
}
.card--center{max-width:520px; margin:60px auto}

.upload-dropzone{
  margin-top:10px;
  padding:14px 16px;
  border:1px dashed rgba(55,111,208,.35);
  border-radius:12px;
  background:rgba(55,111,208,.03);
  color:var(--muted);
  font-weight:700;
  text-align:center;
  cursor:pointer;
}
.upload-dropzone:hover,
.upload-dropzone--active{
  background:rgba(55,111,208,.07);
  border-color:rgba(55,111,208,.55);
  color:var(--text);
}

/* --- Modal --- */
.modal{
  position:fixed; inset:0; z-index:20;
  display:flex; align-items:flex-start; justify-content:center;
  padding:18px;
}
.modal__overlay{position:absolute; inset:0; background:rgba(16,24,40,.55)}
.modal__panel{
  position:relative;
  width:min(1200px, 96vw);
  max-height:92vh;
  overflow:auto;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
}
.modal__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 12px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  position:sticky; top:0;
  z-index:1;
}
.modal__title{font-weight:900; font-size:16px}
.modal__body{padding:14px}

.archiveSurvey{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.archiveSurvey__question{min-width:0}
.archiveSurvey__choices{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px;
  padding:4px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--panel2);
}
.archiveSurvey__choices label{cursor:pointer;min-width:0}
.archiveSurvey__choices input{position:absolute;opacity:0;pointer-events:none}
.archiveSurvey__choices span{
  display:flex;
  min-height:36px;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:6px;
  color:var(--muted);
  font-weight:800;
}
.archiveSurvey__choices input:checked+span{
  border-color:rgba(55,111,208,.35);
  background:var(--panel);
  color:var(--brand);
  box-shadow:0 2px 8px rgba(16,24,40,.08);
}
.archiveSurvey__choices input:focus-visible+span{outline:2px solid var(--brand);outline-offset:1px}

@media (max-width:560px){
  .archiveSurvey{grid-template-columns:1fr}
}

.baseAutoIssue__panel{
  width:min(680px, 96vw);
  max-height:calc(100vh - 36px);
  overflow:hidden;
}
.baseAutoIssue__body{
  display:flex;
  min-width:0;
  max-height:calc(100vh - 115px);
  flex-direction:column;
  gap:14px;
}
.baseAutoIssue__rules{
  min-width:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  border:1px solid var(--border);
  border-radius:8px;
}
.baseAutoIssue__rule{
  display:grid;
  min-width:0;
  grid-template-columns:minmax(0, 1fr) 150px;
  gap:14px;
  align-items:center;
  padding:11px 12px;
  border-bottom:1px solid var(--border);
}
.baseAutoIssue__rule:last-child{border-bottom:0}
.baseAutoIssue__ritten{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
}
.baseAutoIssue__ritten span{display:flex; min-width:0; flex-direction:column; gap:3px}
.baseAutoIssue__ritten strong{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.baseAutoIssue__ritten small{color:var(--muted)}
.baseAutoIssue__quantity{display:grid; grid-template-columns:auto minmax(72px, 1fr); align-items:center; gap:8px}
.baseAutoIssue__quantity span{color:var(--muted); font-size:12px}
.baseAutoIssue__footer{display:flex; min-width:0; align-items:center; justify-content:space-between; gap:12px}
.baseAutoIssue__status{min-width:0; overflow-wrap:anywhere}

@media (max-width: 560px){
  #baseAutoIssueModal{padding:6px}
  .baseAutoIssue__panel{width:calc(100vw - 12px); max-height:calc(100vh - 12px)}
  .baseAutoIssue__body{max-height:calc(100vh - 96px); padding:10px}
  .baseAutoIssue__rule{grid-template-columns:minmax(0, 1fr); gap:8px}
  .baseAutoIssue__quantity{grid-template-columns:1fr 110px}
  .baseAutoIssue__footer{align-items:stretch; flex-direction:column}
  .baseAutoIssue__footer .btn{width:100%}
}

/* --- History --- */
.history{display:flex; flex-direction:column; gap:8px}
.hist{padding:10px 12px; border:1px solid var(--border); background:var(--panel); border-radius:12px; box-shadow:var(--shadow)}
.hist__top{display:flex; justify-content:space-between; gap:10px}
.hist__act{font-weight:900}
.hist__meta{font-size:12px; color:var(--muted)}

/* --- Chat --- */
.chat{border:1px solid var(--border); border-radius:12px; background:var(--panel); overflow:hidden; box-shadow:var(--shadow)}
.chat__msgs{
  height:360px;
  overflow:auto;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:linear-gradient(180deg, #f6f8fb, transparent);
}
.chat--compact .chat__msgs{height:260px}
.msg{padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--panel); max-width:82%; box-shadow:var(--shadow)}
.msg__meta{font-size:11px;color:var(--muted); margin-bottom:3px}
.msg__text{white-space:pre-wrap; word-break:break-word}
.msg--me{align-self:flex-end; border-color:rgba(55,111,208,.22); background:rgba(55,111,208,.08)}
.msg--task{border-color:rgba(245,158,11,.25); background:rgba(245,158,11,.08)}
.chat__input{display:flex; gap:10px; padding:10px; border-top:1px solid var(--border); background:var(--panel)}

/* --- Chat tabs (Step 10) --- */
.chatTabs{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel2);
  margin-bottom:10px;

  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.chatTab{
  -webkit-appearance:none;
  appearance:none;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  font-weight:900;
  font-size:13px;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;

  display:inline-flex;
  align-items:center;
  gap:8px;
}
.chatTab:hover{
  color:var(--text);
  background:rgba(16,24,40,.04);
}
.chatTab.active{
  background:var(--panel);
  color:var(--text);
  border-color:rgba(55,111,208,.25);
  box-shadow:0 1px 0 rgba(16,24,40,.06), 0 2px 10px rgba(16,24,40,.08);
}
.chatTab:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(55,111,208,.18);
}
.chatTab .unreadbubble{transform:translateY(-1px)}

/* --- Chat manager modal (Step 10) --- */
.chatMgrList{display:flex; flex-direction:column; gap:8px; max-height:420px; overflow:auto}
.chatMgrRow{padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--panel); box-shadow:var(--shadow); cursor:pointer}
.chatMgrRow:hover{background:var(--panel2)}
.chatMgrRow.active{border-color:rgba(55,111,208,.35); background:rgba(55,111,208,.10)}
.chatMgrRow__top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.chatMgrRow__title{font-weight:900}
.chatMgrRow__meta{font-size:12px; color:var(--muted)}
.chatMgrMembers{max-height:460px; overflow:auto; display:flex; flex-direction:column; gap:8px}
.chatMgrUser{display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border:1px solid var(--border); border-radius:12px; background:var(--panel); box-shadow:var(--shadow)}
.chatMgrUser:hover{background:var(--panel2)}
.chatMgrUser__meta{min-width:0}
.chatMgrUser__name{font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chatMgrUser__sub{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* --- Checkboxes --- */
.checkrow{display:flex; gap:12px; flex-wrap:wrap}
.check{display:flex; gap:8px; align-items:center; font-weight:800}
.check input{width:18px;height:18px}


/* --- Пункт 7 (UX): плюсик рядом с чекбоксами + кастомные пункты --- */
.checkplus{
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel);
  box-shadow:var(--shadow);
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  line-height:1;
  padding:0;
}
.checkplus:hover{background:var(--panel2)}
.checkplus:disabled{opacity:.45; cursor:not-allowed}
.checkrow--custom{margin-top:8px}
.check__text{font-weight:800}
.check__text.done{text-decoration:line-through; color:var(--muted)}

/* --- Пункт 7: персональный чек-лист Риттена (добавочные пункты) --- */
.rittenChecklist{margin-top:14px; padding:12px; border:1px dashed var(--border); border-radius:12px; background:var(--panel2)}
.rittenChecklist__head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.rittenChecklist__add{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.rittenChecklist__add .input{min-width:240px}
.rittenChecklist__list{margin-top:10px; display:flex; flex-direction:column; gap:10px}
.rittenChecklist__item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 10px; border:1px solid var(--border); border-radius:12px; background:var(--panel); box-shadow:var(--shadow)}
.rittenChecklist__left{display:flex; align-items:center; gap:10px; min-width:0}
.rittenChecklist__text{font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rittenChecklist__text.done{text-decoration:line-through; color:var(--muted)}
.rittenChecklist__actions{display:flex; align-items:center; gap:8px}

/* --- Stats --- */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.stat{border:1px solid var(--border); border-radius:12px; background:var(--panel); padding:12px; box-shadow:var(--shadow)}
.stat__k{font-size:12px;color:var(--muted)}
.stat__v{font-weight:900;font-size:18px}

/* --- Toasts --- */
.toasts{position:fixed; right:12px; bottom:12px; display:flex; flex-direction:column; gap:10px; z-index:50; width:min(380px, 92vw);}
.toast{background:var(--panel); border:1px solid var(--border); border-left:6px solid var(--brand); border-radius:12px; box-shadow:var(--shadow); padding:10px 12px;}
.toast__title{font-weight:900}
.toast__desc{color:var(--muted); font-size:13px}
.toast__meta{margin-top:6px; font-size:12px; color:var(--muted)}

/* --- Messages DM layout --- */
.msggrid{display:grid; grid-template-columns: 320px minmax(0,1fr); gap:12px; align-items:start;}
.msglist{background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:10px; overflow:auto; max-height:calc(100vh - 240px);}
.userrow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 10px; border-radius:12px; cursor:pointer; border:1px solid transparent;}
.userrow:hover{background:var(--panel2); border-color:var(--border)}
.userrow.active{background:rgba(55,111,208,.10); border-color:rgba(55,111,208,.22)}
.userrow__meta{display:flex; flex-direction:column; line-height:1.15}
.userrow__name{font-weight:900; font-size:13px}
.userrow__sub{font-size:12px; color:var(--muted); max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.userrow__right{display:flex; align-items:center; gap:8px}
.userrow__time{font-size:11px; color:var(--muted); min-width:44px; text-align:right}
.userrow__name--unread{font-weight:900}
.msgpane{background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:10px}
.listhead{margin:8px 4px; font-size:11px; color:var(--muted); font-weight:900; text-transform:uppercase; letter-spacing:.45px}
.unreadbubble{min-width:18px; height:18px; padding:0 6px; border-radius:999px; background:var(--brand); color:white; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; box-shadow:0 8px 16px rgba(55,111,208,.18);}

/* --- Responsive --- */
@media (max-width: 1100px){
  .grid2{grid-template-columns:1fr}
  .layout{flex-direction:column}
  .sidebar{position:relative; width:100%; height:auto; border-right:0; border-bottom:1px solid var(--sidebar-border)}
  .content{padding:14px}
  .metricsbar{flex-wrap:wrap}
  .searchbox{min-width:220px}
}

@media (max-width: 900px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .msggrid{grid-template-columns:1fr}
  .msglist{max-height:240px}
}

@media (max-width: 560px){
  .topbar{height:56px; padding:0 12px}
  .layout{min-height:calc(100vh - 56px)}

  /* Mobile: bottom nav style (keep functions) */
  .sidebar{
    position:fixed;
    left:0; right:0; bottom:0;
    top:auto;
    width:auto;
    height:auto;
    padding:8px 10px;
    display:flex;
    flex-direction:row;
    gap:8px;
    overflow:auto;
    border-top:1px solid var(--sidebar-border);
    border-right:0;
    z-index:50;
  }
  .sidehead,.divider,.navgroup__title,.sidebar__footer{display:none}
  .navgroup{margin:0}
  .navbtn{flex:1; justify-content:center; flex-direction:column; gap:4px; padding:8px 8px}
  .navbtn__label{font-size:11px}
  .navbtn__icon{color:var(--sidebar-text)}
  .content{padding-bottom:86px}
  .table{min-width:760px}
  .searchbox{min-width:200px}
}

@media (max-width: 420px){
  .metricsbar{gap:10px}
  .metriccard{min-width:140px}
}


/* --- Sidebar layout tweaks (footer at bottom) --- */
.sidebar{display:flex; flex-direction:column;}
.nav{flex:1;}
.sidebar__footer{margin-top:auto;}

/* --- SLA highlight ("зависло") --- */
.sla-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--panel2);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.sla-badge--manager{border-color:rgba(148,163,184,.32); background:rgba(148,163,184,.10); color:#64748b}
.sla-badge--ritten{border-color:rgba(225,75,75,.30); background:rgba(225,75,75,.10); color:var(--danger)}
.sla-row--manager td{background:rgba(148,163,184,.06)}
.sla-row--ritten td{background:rgba(225,75,75,.06)}

/* --- Task status colors --- */
.badge--ok{border-color:rgba(17,196,106,.30); background:rgba(17,196,106,.12); color:var(--ok)}
.badge--muted{border-color:rgba(148,163,184,.28); background:rgba(148,163,184,.10); color:var(--muted)}

/* --- Auth (login) view --- */
.view--auth{
  min-height:calc(100vh - 64px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.view--auth .card--center{margin:0; width:min(520px, 92vw)}

/* Make login screen blend with the left sidebar style (dark background),
   while keeping the rest of the app in the default theme. */
body:not(.authed){
  background:var(--sidebar-bg);
  color:var(--sidebar-text);
}
body:not(.authed) .topbar{
  background:var(--sidebar-bg);
  border-bottom:1px solid var(--sidebar-border);
  color:var(--sidebar-text);
}
body:not(.authed) .brand__sub,
body:not(.authed) .topbar .muted{color:var(--sidebar-muted)}

body:not(.authed) .view--auth{background:transparent}
body:not(.authed) .view--auth .card--center{
  background:rgba(255,255,255,.06);
  border:1px solid var(--sidebar-border);
  box-shadow:none;
  color:var(--sidebar-text);
}
body:not(.authed) .view--auth .label{color:var(--sidebar-muted)}
body:not(.authed) .view--auth .input{
  background:rgba(15,23,42,.35);
  border:1px solid rgba(255,255,255,.12);
  color:var(--sidebar-text);
}
body:not(.authed) .view--auth .input::placeholder{color:rgba(255,255,255,.38)}
body:not(.authed) .view--auth .hint{
  background:rgba(0,0,0,.16);
  border-color:rgba(255,255,255,.10);
  color:var(--sidebar-muted);
}
body:not(.authed) .view--auth .error{color:#ffb4b4}

.statusCell{display:flex; flex-direction:column; gap:6px; align-items:flex-start;}

.row--full td{opacity:0.75;}

.taskActions{
  white-space:nowrap;
}
.taskActions .btn{
  margin-right:6px;
}
.taskActions .btn:last-child{
  margin-right:0;
}
/* ===== AUTH STATE SWITCH (FINAL FIX) ===== */

/* ПО УМОЛЧАНИЮ: пользователь НЕ авторизован */
#mainView{display:none}

/* Когда НЕ authed — показываем логин */
body:not(.authed) #loginView{
  display:flex;
}

/* Когда authed — скрываем логин */
body.authed #loginView{
  display:none;
}

/* Когда authed — показываем приложение */
body.authed #mainView{
  display:block;
}
/* --- Lead tags (Интересно / Холд) --- */
.tagsInline{
  display:inline-flex;
  gap:6px;
  margin-left:8px;
  vertical-align:middle;
}

.nres-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  background:var(--danger);
  box-shadow:0 0 0 2px rgba(239,68,68,.15);
}

/* кнопки-метки в карточке */
.btn--warn{
  background:rgba(245,158,11,.12);
  border-color:rgba(245,158,11,.25);
  color:var(--warn);
}
.btn--muted{
  background:rgba(148,163,184,.10);
  border-color:rgba(148,163,184,.25);
  color:var(--muted);
}

/* Wide icon button (used for "Просмотр" in team table) */
.iconbtn--wide{
  width:auto;
  padding:0 10px;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
}
.iconbtn--wide span{font-size:13px; font-weight:800; color:inherit;}


/* Read-only banner for "Просмотр" mode */
.viewonlybar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  margin-bottom:12px;
  border:1px solid rgba(255, 196, 0, .35);
  background:rgba(255, 196, 0, .12);
  border-radius:14px;
}
.viewonlybar__title{font-weight:900;}
.viewonlybar__text{font-size:13px; color:var(--muted)}

.view-only .btn--primary{
  opacity:.92;
}

/* Leads pagination (Update #7) */
.pagerbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-top:1px solid rgba(148,163,184,.18);
}
.pagerbar__left{display:flex; align-items:center; gap:10px;}
.pagerbar__right{display:flex; align-items:center; gap:10px;}
.pagerbar__info{font-size:13px;}


/* Admin statuses module */
.colorpick{width:46px;height:38px;border:1px solid var(--border);background:transparent;border-radius:10px;padding:0;}


/* Step 4: archive explanation box */
.note--archive{
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.06);
  color: var(--text);
}


/* -----------------------
   Analytics modal
   ----------------------- */

.an-head{display:flex; gap:14px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap;}
.an-person{display:flex; flex-direction:column; gap:6px;}
.an-name{font-size:20px; font-weight:900; letter-spacing:0.2px;}
.an-meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}

.an-top{display:grid; grid-template-columns: 360px 1fr; gap:12px; align-items:stretch;}
@media (max-width: 900px){
  .an-top{grid-template-columns:1fr;}
}

.an-index__value{font-size:42px; font-weight:950; line-height:1; margin-top:6px;}
.an-index__badge{padding:6px 10px; border-radius:999px; font-weight:900; font-size:12px; border:1px solid var(--border);}
.an-index__badge.red{background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.25);}
.an-index__badge.yellow{background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.28);}
.an-index__badge.green{background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.25);}

.an-gauge{height:10px; background: rgba(148,163,184,.18); border-radius:999px; overflow:hidden; margin-top:10px;}
.an-gauge__bar{height:100%; width:0%; background: var(--brand); border-radius:999px; transition: width .25s ease;}
.an-oneliner{margin-top:10px; font-weight:800;}

.an-parts{margin-top:10px;}

.an-compare__grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.an-compare__item{padding:12px; border:1px solid rgba(148,163,184,.18); border-radius:12px; background: rgba(148,163,184,.03);}
.an-compare__val{font-size:18px; font-weight:950; margin-top:6px;}

.an-kpi-grid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px;}
.an-kpis{margin-top:10px;}
@media (max-width: 1100px){
  .an-kpi-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 520px){
  .an-kpi-grid{grid-template-columns: 1fr;}
}

.an-tile{padding:12px; border:1px solid var(--border); border-radius:12px; background: rgba(148,163,184,.06);}
.an-tile__label{font-size:12px; color: var(--muted); font-weight:800;}
.an-tile__value{font-size:18px; font-weight:950; margin-top:6px;}
.an-tile__sub{font-size:12px; color: var(--muted); margin-top:2px;}

.an-part{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid rgba(148,163,184,.16);}
.an-part:last-child{border-bottom:none;}
.an-part__left{display:flex; flex-direction:column; gap:2px;}
.an-part__name{font-weight:900;}
.an-part__meta{font-size:12px; color: var(--muted);}
.an-part__right{display:flex; align-items:center; gap:10px;}
.an-part__bar{width:92px; height:8px; background: rgba(148,163,184,.18); border-radius:999px; overflow:hidden;}
.an-part__bar > div{height:100%; width:0%; background: var(--brand); border-radius:999px;}
.an-part__score{font-weight:950; min-width:48px; text-align:right;}

.an-chartgrid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:10px;}
@media (max-width: 900px){
  .an-chartgrid{grid-template-columns:1fr;}
}

.an-chart{border:1px solid rgba(148,163,184,.18); border-radius:12px; padding:10px; background: rgba(148,163,184,.03);}
.an-chart__title{font-weight:900; font-size:12px; color: var(--muted); margin-bottom:6px;}
.an-chart__box{height:160px; position:relative;}

.an-tooltip{position:absolute; pointer-events:none; padding:6px 8px; border-radius:10px; background: rgba(15,23,42,.92); color:#fff; font-size:12px; transform: translate(-50%, -120%); white-space:nowrap;}

.an-comparegrid, .an-compare__kpis{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px;}
@media (max-width: 1100px){
  .an-comparegrid, .an-compare__kpis{grid-template-columns: repeat(2, minmax(0, 1fr));}
}

.an-comparecard{padding:12px; border:1px solid var(--border); border-radius:12px; background: rgba(148,163,184,.04);}
.an-comparecard__title{font-weight:900; font-size:12px; color: var(--muted);}
.an-comparecard__value{font-weight:950; font-size:18px; margin-top:6px;}
.an-delta{font-weight:900; font-size:12px; padding:4px 8px; border-radius:999px; display:inline-flex; align-items:center; gap:6px;}
.an-delta.up{background: rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.25);}
.an-delta.down{background: rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.25);}
.an-delta.flat{background: rgba(148,163,184,.10); border:1px solid rgba(148,163,184,.20);}

.an-insights{display:flex; flex-direction:column; gap:8px;}
.an-insight{padding:10px 12px; border-radius:12px; border:1px solid rgba(148,163,184,.18); background: rgba(148,163,184,.04); font-weight:700;}
.an-sw{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px;}
@media (max-width: 900px){
  .an-sw{grid-template-columns:1fr;}
}
.an-list{margin:0; padding-left:18px;}
.an-list li{margin:6px 0;}

.an-config{display:grid; grid-template-columns: 1fr 110px; gap:8px;}
.an-config__row{display:contents;}
.an-config__label{font-weight:800;}




/* ========================================================================
   Responsive hardening (mobile → desktop)
   Goal: nothing overlaps; layouts wrap/stack gracefully.
   NOTE: only CSS overrides/additions. No logic removed.
   ======================================================================== */
:root{
  /* iOS safe-area support for bottom nav */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body{
  width:100%;
  max-width:100%;
}

/* Prevent flex/grid children from forcing overflow */
#app, #mainView, .layout, .sidebar, .content, .tab, .panel, .card{
  min-width:0;
}

img, svg, canvas{max-width:100%; height:auto}

/* Make key flex headers wrap instead of overlapping */
.tabhead{flex-wrap:wrap; align-items:flex-start}
.filtersbar{flex-wrap:wrap; align-items:flex-start}
.modal__head{flex-wrap:wrap; align-items:flex-start}
.chat__input{flex-wrap:wrap}

/* Inputs never overflow */
.input, select, textarea{max-width:100%}

/* Chat input: keep send button accessible on small widths */
.chat__input .input{flex:1 1 240px; min-width:0}
.chat__input textarea.input{resize:vertical; min-height:38px;}
.chat__input .btn{flex:0 0 auto}

/* Avoid “squeezed” two-column grids on tablets */
@media (max-width: 900px){
  .tabhead{
    flex-direction:column;
    align-items:stretch;
  }
  .tabhead__right{
    width:100%;
    justify-content:space-between;
  }

  /* Filters toolbar stacks */
  .filtersbar{
    flex-direction:column;
    align-items:stretch;
  }
  .filtersbar__right{
    width:100%;
    justify-content:space-between;
    flex-wrap:wrap;
  }

  /* Make toolbars not overflow */
  .panel--toolbar{
    align-items:stretch;
  }
  .panel--toolbar .panel__meta{
    width:100%;
  }

  /* Message tab grid already goes 1col at 900px; ensure padding */
  .content{padding:14px}
}

/* Phone: single column forms + buttons */
@media (max-width: 720px){
  .grid{grid-template-columns:1fr}

  /* Modal header: close button stays reachable */
  .modal__head .row{width:100%; justify-content:flex-end}

  /* Segmented controls: wrap nicely */
  .segmented{width:100%; justify-content:space-between}
  .seg{flex:1; text-align:center}

  /* Buttons can wrap */
  .btn{max-width:100%}

  /* Slightly tighten */
  .modal__body{padding:12px}
  .card{padding:12px}
}

/* Small phones: ensure bottom nav doesn't overlap content */
@media (max-width: 560px){
  .content{padding-bottom:calc(86px + var(--safe-bottom))}
  .chat__input .btn{width:100%}
  .modal__panel{max-height:calc(92vh - 8px)}
}

/* Very small phones */
@media (max-width: 420px){
  .content{padding:12px; padding-bottom:calc(86px + var(--safe-bottom))}
  .tabhead__right{gap:8px}
  .filtersbar{gap:10px}
  .metriccard{min-width:132px}
}

/* Ultra-small devices */
@media (max-width: 360px){
  .metriccard{min-width:118px}
  .navbtn__label{font-size:10px}
}



/* Tablet: when sidebar is on top (<=1100px and >560px), show nav buttons in a compact grid */
@media (max-width: 1100px) and (min-width: 561px){
  .sidebar{padding:10px 12px}
  .navgroup{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:8px;
    margin-top:10px;
  }
  .navgroup__title{grid-column:1 / -1}
  .navbtn{
    width:100%;
    justify-content:flex-start;
  }
}



/* Taskboard (tasks-by-leads): stack columns on narrow screens if present */
@media (max-width: 900px){
  .tasksboard{flex-direction:column}
  .tasksboard__left, .tasksboard__right{width:100%; min-width:0}
}
@media (max-width: 560px){
  .tasksboard__left{max-height:240px; overflow:auto}
}


/* =========================
   STEP 1 — Messengers tried
   ========================= */
.messengers-tried{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.msgr-btn{
  width:38px;
  height:38px;
  padding:0;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.04);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.msgr-btn svg{
  width:24px;
  height:24px;
  display:block;
}

.msgr-btn.is-on{
  border-color:#24c865;
  box-shadow:0 0 0 2px rgba(36,200,101,0.32);
}

.msgr-btn:disabled{
  opacity:0.55;
  cursor:not-allowed;
  box-shadow:none;
}
/* --- Lead modal top bar: actions + Tel field on the far right --- */
.leadTopbar{
  align-items:center;
}
.leadTopbar__buttons{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  min-width:0;
}
.leadTopbar__tel{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.leadTopbar__telLabel{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}

/* Desktop: show Tel on the right, hide inline label near "Номер" */
@media (min-width: 721px){
  .label__tel{ display:none; }
}

/* Mobile: keep inline Tel near "Номер", hide top bar Tel to save space */
@media (max-width: 720px){
  .leadTopbar__tel{ display:none; }
}

/* --- Lead list: phone cell wrapper (prevents badges/tags from overlapping FIO) --- */
.lead-phonecell{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}
.lead-phonecell .tagsInline{ margin-left:0; }

/* --- Lead modal: prevent flex items from overflowing (duplicates table, long fields) --- */
#leadModal .modal__body .row > *{
  min-width:0;
}

/* --- Lead modal: duplicates list (compact and contained) --- */
#leadDupBox .dupList__wrap{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--panel);
  max-width:100%;
  max-height:280px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
#leadDupBox .table--dupes{
  min-width:760px; /* readability; container scrolls */
}
#leadDupBox .table--dupes thead th,
#leadDupBox .table--dupes tbody td{
  padding:10px 10px;
  font-size:12px;
}
#leadDupBox .dupSummary .badge{ cursor:pointer; }


/* Step 5: Leads dashboard multi-select + bulk actions bar */
.table thead th.selcol,
.table tbody td.selcol{
  width: 34px;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}
.table thead th.selcol input[type="checkbox"],
.table tbody td.selcol input[type="checkbox"]{
  width: 16px;
  height: 16px;
}

.bulkbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel2);
}
.bulkbar__left{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.bulkbar__right{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.bulkbar__count{
  font-size: 12px;
  font-weight: 900;
}

/* Step 5 UI fix: compact bulk quick actions inside filters row (no large bar by default) */
.bulkmini{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding-left:10px;
  margin-left:6px;
  border-left:1px dashed var(--border);
}
.bulkmini__count{
  font-size:12px;
  font-weight:900;
  color:var(--muted);
}
.bulkmini__actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.bulkmini .btn--sm{
  padding:6px 10px;
}
#leadsBulkMoreBtn{
  min-width:34px;
}

/* Papers top modal: compact table so all metric columns fit without bulky controls. */
#papersTopModal{
  padding:8px;
}
#papersTopModal .papersTopModal__panel{
  width:min(1080px, 98vw);
  max-height:calc(96vh - 16px);
  border-radius:10px;
}
#papersTopModal .modal__head{
  padding:10px 14px;
}
#papersTopModal .modal__body{
  padding:10px 14px 12px;
}
#papersTopModal .modal__title{
  font-size:15px;
}
#papersTopModal .papersTopFilters{
  gap:8px;
  flex-wrap:wrap;
  align-items:flex-end;
  margin-bottom:8px;
}
#papersTopModal .papersTopFilters .field,
#papersTopModal .papersTopFilters label{
  min-width:0;
}
#papersTopModal .papersTopFilters input[type="date"]{
  width:150px;
}
#papersTopModal #papersTopLine{
  margin-bottom:8px !important;
  font-size:13px;
  line-height:1.25;
}
#papersTopModal .papersTopTableWrap{
  overflow:auto;
}
#papersTopModal .papersTopTable{
  min-width:0;
  table-layout:fixed;
  font-size:13px;
}
#papersTopModal .papersTopTable thead th,
#papersTopModal .papersTopTable tbody td{
  padding:8px 8px;
}
#papersTopModal .papersTopTable thead th:nth-child(1),
#papersTopModal .papersTopTable tbody td:nth-child(1){
  width:54px;
  text-align:center;
}
#papersTopModal .papersTopTable thead th:nth-child(3),
#papersTopModal .papersTopTable tbody td:nth-child(3){
  width:92px;
}
#papersTopModal .papersTopTable thead th:nth-child(4),
#papersTopModal .papersTopTable tbody td:nth-child(4),
#papersTopModal .papersTopTable thead th:nth-child(5),
#papersTopModal .papersTopTable tbody td:nth-child(5),
#papersTopModal .papersTopTable thead th:nth-child(6),
#papersTopModal .papersTopTable tbody td:nth-child(6){
  width:92px;
  text-align:left;
}
#papersTopModal .papersTopSortBtn{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--brand);
  font:inherit;
  font-size:13px;
  font-weight:900;
  line-height:1.15;
  padding:0;
  cursor:pointer;
  white-space:normal;
  text-align:left;
}
#papersTopModal .papersTopSortBtn:hover{
  text-decoration:underline;
}
#papersTopModal .papersTopUserName{
  font-size:14px;
  font-weight:900;
  line-height:1.2;
  white-space:normal;
}
#papersTopModal .papersTopNum{
  font-size:15px;
  font-weight:900;
}
#papersTopModal .badge{
  padding:5px 9px;
  min-width:30px;
  justify-content:center;
}

/* Average closing time */
.averageTime__filters{
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.averageTime__filters .field{
  width:180px;
  max-width:100%;
}
.averageTime__cohort{
  align-items:center;
  gap:7px;
  margin:0 4px 8px;
  font-size:12px;
}
.averageTime__refresh{
  width:36px;
  min-width:36px;
  height:34px;
  padding:0;
  font-size:18px;
}
.averageTime__hint{
  margin-top:8px;
}
.averageTime__metrics{
  display:grid;
  grid-template-columns:repeat(4, minmax(120px, 1fr));
  gap:1px;
  margin-top:14px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--border);
}
.averageTime__metric{
  display:flex;
  min-height:66px;
  padding:10px 12px;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  background:var(--panel);
}
.averageTime__metric span{
  color:var(--muted);
  font-size:12px;
}
.averageTime__metric strong{
  font-size:20px;
  line-height:1.1;
}
.averageTime__tableWrap{
  margin-top:14px;
}
.averageTime__table{
  min-width:720px;
}
.averageTime__table th:not(:first-child),
.averageTime__table td:not(:first-child){
  width:150px;
  text-align:right;
}
.averageTime__rittenBtn{
  border:0;
  padding:0;
  background:transparent;
  color:var(--brand);
  font:inherit;
  font-weight:900;
  cursor:pointer;
}
.averageTime__detailHead{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) minmax(220px, 360px);
  align-items:center;
  gap:12px;
  margin-top:16px;
}
.averageTime__rittenName{
  font-size:17px;
  font-weight:900;
}
.averageTime__search{
  min-width:0;
}
.averageTime__leadsTable{
  min-width:860px;
}
.averageTime__leadPhone{
  border:0;
  padding:0;
  background:transparent;
  color:var(--brand);
  font:inherit;
  font-weight:900;
  cursor:pointer;
}
.averageTime__working{
  color:#b86a00;
  font-weight:900;
}
.averageTime__closed{
  color:#168653;
  font-weight:900;
}
.averageTime__pager{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
}
@media (max-width: 720px){
  .averageTime__filters .field{
    width:calc(50% - 5px);
  }
  .averageTime__metrics{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .averageTime__detailHead{
    grid-template-columns:auto minmax(0, 1fr);
  }
  .averageTime__search{
    grid-column:1 / -1;
  }
}

/* Marketer analytics */
.marketer__tabs{
  display:flex;
  width:max-content;
  max-width:100%;
  margin-bottom:16px;
  padding:3px;
  gap:2px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg);
}
.marketer__tabBtn{
  border:0;
  border-radius:6px;
  padding:8px 13px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
}
.marketer__tabBtn.is-active{
  background:var(--panel);
  color:var(--text);
  box-shadow:0 1px 3px rgba(15, 23, 42, .12);
}
.marketer__filters{
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.marketer__filters .field{
  width:180px;
  max-width:100%;
}
.marketer__deleted{
  align-items:center;
  gap:6px;
  margin:0 4px 8px;
  font-size:12px;
}
.marketer__summary{
  display:grid;
  grid-template-columns:repeat(6, minmax(120px, 1fr));
  gap:1px;
  margin-top:16px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--border);
}
.marketer__metric{
  display:flex;
  min-height:64px;
  padding:10px 12px;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  background:var(--panel);
}
.marketer__metric span{
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}
.marketer__metric strong{
  font-size:20px;
  line-height:1;
}
.marketer__tableWrap{
  margin-top:14px;
  overflow-x:auto;
}
.marketer__table{
  min-width:980px;
}
.marketer__table th:not(:first-child),
.marketer__table td:not(:first-child){
  text-align:right;
  white-space:nowrap;
}
.marketer__teamRow td{
  border-top:2px solid var(--border);
  background:var(--bg);
  font-weight:900;
}
.marketer__rittenRow td:first-child{
  font-weight:800;
}
.marketer__indent{
  display:inline-block;
  padding-left:20px;
  position:relative;
}
.marketer__indent::before{
  content:"";
  position:absolute;
  left:6px;
  top:50%;
  width:7px;
  height:7px;
  border-left:1px solid var(--muted);
  border-bottom:1px solid var(--muted);
  transform:translateY(-65%);
}
.marketer__teamEditor{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg);
}
.marketer__teamHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.marketer__teamTitle{
  font-size:16px;
  font-weight:900;
}
.marketer__teamControls{
  display:flex;
  align-items:flex-end;
  gap:8px;
  margin-top:12px;
  flex-wrap:wrap;
}
.marketer__teamControls .field{
  width:220px;
}
.marketer__teamControls .marketer__teamNameField{
  width:280px;
}
.marketer__rittenList{
  display:grid;
  grid-template-columns:repeat(3, minmax(180px, 1fr));
  gap:8px;
  max-height:260px;
  margin-top:14px;
  padding:10px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--panel);
}
.marketer__rittenOption{
  display:flex;
  min-width:0;
  align-items:flex-start;
  gap:7px;
  font-size:13px;
  line-height:1.3;
}
.marketer__rittenOption span{
  min-width:0;
  overflow-wrap:anywhere;
}
.marketer__teamActions{
  align-items:center;
  gap:10px;
  margin-top:12px;
}
.marketer__modes{
  display:flex;
  max-width:100%;
  padding:3px;
  gap:2px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg);
}
.marketer__modes label{
  cursor:pointer;
}
.marketer__modes input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.marketer__modes span{
  display:block;
  padding:8px 10px;
  border-radius:6px;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.marketer__modes input:checked + span{
  background:var(--panel);
  color:var(--text);
  box-shadow:0 1px 3px rgba(15, 23, 42, .12);
}
.marketer__modeHint{
  margin-top:9px;
  font-size:12px;
}
.marketer__sourcesTable{
  min-width:1480px;
}
.marketer__sourcesTable th:first-child,
.marketer__sourcesTable td:first-child{
  width:120px;
}
.marketer__sourcesTable th:nth-child(n+2):nth-child(-n+6),
.marketer__sourcesTable td:nth-child(n+2):nth-child(-n+6){
  width:82px;
}
.marketer__sourcesTable th:nth-child(7),
.marketer__sourcesTable td:nth-child(7){ width:135px; }
.marketer__sourcesTable th:nth-child(8),
.marketer__sourcesTable td:nth-child(8){ width:145px; }
.marketer__sourcesTable th:nth-child(9),
.marketer__sourcesTable td:nth-child(9){ width:175px; }
.marketer__sourcesTable th:nth-child(10),
.marketer__sourcesTable td:nth-child(10){ width:175px; }
.marketer__sourcesTable th:nth-child(11),
.marketer__sourcesTable td:nth-child(11){ width:240px; }
.marketer__sourceName,
.marketer__sourcesTable tfoot th{
  font-weight:900;
}
.marketer__cellInput{
  width:100%;
  min-width:105px;
  text-align:right;
}
.marketer__noteInput{
  min-width:220px;
  text-align:left;
}
.marketer__money{
  font-weight:800;
}
.marketer__sourcesTable tfoot th{
  border-top:2px solid var(--border);
  background:var(--bg);
}
.marketer__saveBar{
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin-top:14px;
}
@media (max-width: 1100px){
  .marketer__summary{ grid-template-columns:repeat(3, minmax(120px, 1fr)); }
  .marketer__rittenList{ grid-template-columns:repeat(2, minmax(180px, 1fr)); }
}
@media (max-width: 720px){
  .marketer__tabs{ width:100%; }
  .marketer__tabBtn{ flex:1; }
  .marketer__filters .field{ width:calc(50% - 5px); }
  .marketer__summary{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .marketer__modes{ width:100%; overflow-x:auto; }
  .marketer__rittenList{ grid-template-columns:1fr; }
  .marketer__teamControls .field,
  .marketer__teamControls .marketer__teamNameField{ width:100%; }
}

/* Sources grouped by ritten */
.rittenSources__filters{
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.rittenSources__filters .field{
  width:180px;
  max-width:100%;
}
.rittenSources__deleted{
  align-items:center;
  gap:6px;
  margin:0 4px 8px;
  font-size:12px;
}
.rittenSources__refresh{
  width:36px;
  min-width:36px;
  height:34px;
  padding:0;
  font-size:18px;
}
.rittenSources__summary{
  display:grid;
  grid-template-columns:repeat(7, minmax(110px, 1fr));
  gap:1px;
  margin-top:16px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--border);
}
.rittenSources__metric{
  display:flex;
  min-width:0;
  min-height:64px;
  padding:10px 12px;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  background:var(--panel);
}
.rittenSources__metric span{
  overflow:hidden;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.rittenSources__metric strong{
  font-size:21px;
  line-height:1;
}
.rittenSources__metric--waiting strong{ color:#b86a00; }
.rittenSources__metric--issued strong{ color:#2563eb; }
.rittenSources__metric--new strong{ color:#64748b; }
.rittenSources__metric--done strong{ color:#168653; }
.rittenSources__metric--total strong{ color:var(--brand); }
.rittenSources__period{
  margin-top:10px;
  font-size:13px;
}
.rittenSources__content{
  margin-top:12px;
}
.rittenSources__group{
  padding:18px 0 8px;
  border-top:1px solid var(--border);
}
.rittenSources__group:first-child{
  padding-top:10px;
  border-top:0;
}
.rittenSources__groupHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}
.rittenSources__name{
  min-width:0;
  font-size:16px;
  font-weight:900;
}
.rittenSources__groupStats{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
}
.rittenSources__groupStats strong{
  margin-left:4px;
  color:var(--text);
  font-size:14px;
}
.rittenSources__table{
  min-width:760px;
}
.rittenSources__table th:not(:first-child),
.rittenSources__table td:not(:first-child){
  width:132px;
  text-align:right;
}
.rittenSources__source{
  font-weight:800;
}
.rittenSources__totalCell,
.rittenSources__table tfoot th{
  font-weight:900;
}
.rittenSources__table tfoot th{
  border-top:2px solid var(--border);
  background:var(--panel);
}
.rittenSources__loading,
.rittenSources .empty{
  grid-column:1 / -1;
  padding:22px;
  color:var(--muted);
  text-align:center;
  background:var(--panel);
}
@media (max-width: 1100px){
  .rittenSources__summary{
    grid-template-columns:repeat(4, minmax(120px, 1fr));
  }
}
@media (max-width: 720px){
  .rittenSources__filters .field{
    width:calc(50% - 5px);
  }
  .rittenSources__summary{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .rittenSources__groupHead{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .rittenSources__groupStats{
    gap:10px;
  }
}

.msg--system{
  border-left:3px solid #4b84e8;
  background:#f3f7ff;
}

@media (max-width: 720px){
  #papersTopModal{
    padding:4px;
  }
  #papersTopModal .papersTopModal__panel{
    width:calc(100vw - 8px);
    max-height:calc(98vh - 8px);
  }
  #papersTopModal .modal__body{
    padding:8px;
  }
  #papersTopModal .papersTopFilters input[type="date"]{
    width:136px;
  }
  #papersTopModal .papersTopTable{
    min-width:720px;
  }
}
.topVacancies__filters{
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.topVacancies__sort{
  display:grid;
  grid-template-columns:repeat(2,minmax(88px,1fr));
  min-height:36px;
  padding:3px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface-2,#f3f6fb);
}
.topVacancies__sortBtn{
  border:0;
  border-radius:5px;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-weight:700;
  cursor:pointer;
  padding:6px 12px;
}
.topVacancies__sortBtn.is-active{
  color:#fff;
  background:#2f6fed;
}
.topVacancies__limitField{width:130px}
.topVacancies__limitField .input{width:100%}
.topVacancies__cohort{min-height:36px;align-items:center;white-space:nowrap}
.topVacancies__summary{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:14px 0 10px;
}
.topVacancies__metric{
  min-width:130px;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface,#fff);
}
.topVacancies__metric strong{display:block;font-size:18px;line-height:1.2}
.topVacancies__metric span{display:block;margin-top:2px;color:var(--muted);font-size:12px}
.topVacancies__table{min-width:680px;table-layout:fixed}
.topVacancies__table th:nth-child(1){width:44%}
.topVacancies__table th:nth-child(2){width:32%}
.topVacancies__table th:nth-child(3),
.topVacancies__table th:nth-child(4){width:12%;text-align:right}
.topVacancies__table td{overflow-wrap:anywhere}
.topVacancies__table td:nth-child(3),
.topVacancies__table td:nth-child(4){text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .topVacancies__filters>.field{min-width:calc(50% - 5px);flex:1 1 calc(50% - 5px)}
  .topVacancies__filters>.topVacancies__sortField{flex:1 1 100%;min-width:100%}
  .topVacancies__filters>.topVacancies__limitField{flex:1 1 100%;min-width:100%;width:auto}
  .topVacancies__cohort{flex:1 1 100%;min-width:100%;white-space:normal}
  .topVacancies__filters>.btn{flex:1 1 calc(50% - 5px)}
}