/* DSS CRM Design System — компоненты. Требует tokens.css. */

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font:400 var(--fs-base)/1.45 var(--font);-webkit-font-smoothing:antialiased}

/* Каркас: меню фиксированной ширины, контент на всю оставшуюся ширину */
.app{display:flex;min-height:100vh}
.side{width:var(--sidebar-w);flex:none;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column}
.main{flex:1;min-width:0;display:flex;flex-direction:column}

/* Меню */
.logo{height:46px;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--border)}
.logo b{font-size:var(--fs-md);font-weight:700;letter-spacing:.2px}
.logo .dot{width:8px;height:8px;border-radius:50%;background:var(--brand)}
.nav{padding:8px 6px;flex:1}
.nav-group{font-size:var(--fs-xs);color:var(--text-dim);text-transform:uppercase;letter-spacing:.6px;padding:12px 8px 5px}
.nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:var(--radius-sm);color:var(--text-muted);text-decoration:none;font-size:var(--fs-base)}
.nav a:hover{background:var(--surface-2);color:var(--text)}
.nav a.on{background:var(--brand-bg);color:var(--brand);font-weight:500}
.nav .cnt{font:500 var(--fs-xs)/1 var(--font-mono);color:var(--text-dim);background:var(--surface-3);padding:3px 5px;border-radius:3px}
.me{border-top:1px solid var(--border);padding:10px 14px;display:flex;align-items:center;gap:8px}
.ava{width:24px;height:24px;border-radius:50%;background:var(--action-dim);color:var(--text);display:grid;place-items:center;font-size:var(--fs-xs);font-weight:600}
.me span{font-size:var(--fs-sm);color:var(--text-muted)}

/* Шапка страницы */
.top{height:46px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 var(--page-pad);background:var(--surface);border-bottom:1px solid var(--border)}
.top h1{font-size:var(--fs-lg);font-weight:600}
.top .sub{color:var(--text-dim);font-size:var(--fs-sm);margin-left:10px;font-weight:400}
.top-actions{display:flex;gap:8px}

/* Кнопки */
.btn{height:28px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text);font:500 var(--fs-base) var(--font);cursor:pointer}
.btn:hover{background:var(--surface-3)}
.btn.primary{background:var(--action);border-color:var(--action);color:#0B1020;font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}

/* Панель фильтров */
.bar{display:flex;align-items:center;gap:var(--gap);padding:10px var(--page-pad);border-bottom:1px solid var(--border);background:var(--bg);flex-wrap:wrap}
.search{position:relative;flex:1;max-width:380px;min-width:220px}
.search input{width:100%;height:28px;padding:0 10px 0 28px;background:var(--surface-3);border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text);font:400 var(--fs-base) var(--font)}
.search input::placeholder{color:var(--text-dim)}
.search input:focus{outline:none;border-color:var(--action);box-shadow:0 0 0 2px var(--action-bg)}
.search svg{position:absolute;left:8px;top:7px;opacity:.5}
select{height:28px;padding:0 24px 0 9px;background:var(--surface-3) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='%2397A3B4' fill='none' stroke-width='1.4'/></svg>") no-repeat right 8px center;border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text);font:400 var(--fs-base) var(--font);appearance:none;cursor:pointer}
.chip{height:28px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border:1px solid var(--border-strong);border-radius:14px;background:transparent;color:var(--text-muted);font:400 var(--fs-sm) var(--font);cursor:pointer}
.chip:hover{color:var(--text)}
.chip.on{background:var(--action-bg);border-color:var(--action-dim);color:var(--action)}
.spacer{flex:1}
.count{color:var(--text-dim);font-size:var(--fs-sm);white-space:nowrap}
.count b{color:var(--text-muted);font-weight:600}

/* Таблица */
.wrap{flex:1;overflow:auto;padding:0 var(--page-pad) var(--page-pad)}
table{width:100%;border-collapse:separate;border-spacing:0;margin-top:10px}
thead th{position:sticky;top:0;z-index:2;background:var(--surface);color:var(--text-dim);font:600 var(--fs-xs)/1 var(--font);text-transform:uppercase;letter-spacing:.5px;text-align:left;padding:9px var(--cell-pad-x);border-top:1px solid var(--border);border-bottom:1px solid var(--border-strong);white-space:nowrap}
thead th:first-child{border-left:1px solid var(--border);border-radius:var(--radius) 0 0 0}
thead th:last-child{border-right:1px solid var(--border);border-radius:0 var(--radius) 0 0}
thead th.num{text-align:right}
tbody td{height:var(--row-h);padding:var(--cell-pad-y) var(--cell-pad-x);border-bottom:1px solid var(--border);background:var(--surface);vertical-align:middle;white-space:nowrap}
tbody td:first-child{border-left:1px solid var(--border)}
tbody td:last-child{border-right:1px solid var(--border)}
tbody tr:hover td{background:var(--surface-2)}

/* Ячейки */
.num{text-align:right;font:500 var(--fs-base)/1 var(--font-mono);font-variant-numeric:tabular-nums}
.mono{font:400 var(--fs-sm)/1 var(--font-mono);color:var(--text-muted)}
.zero{color:var(--text-dim)}
.low{color:var(--warn)}
.none{color:var(--danger)}
.ph{width:26px;height:26px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#2A3341,#1B222C);border:1px solid var(--border);display:block}

/* Ячейка товара: две строки без flex на td — flex на ячейке ломает высоту строки.
   Ширина ограничена: длинное название иначе выталкивает правые колонки за экран */
td.tname{max-width:330px}
td.tname a{display:block;color:var(--text);text-decoration:none;font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
td.tname a:hover{color:var(--action)}
td.tname small{display:block;color:var(--text-dim);font-size:var(--fs-xs);line-height:1.4;margin-top:1px}

/* Чипы-ярлыки */
.tag{display:inline-block;padding:2px 6px;border-radius:3px;font:600 var(--fs-xs)/1.3 var(--font);letter-spacing:.3px;vertical-align:middle}
.tag+.tag{margin-left:4px}
.tag.dss{background:var(--brand-bg);color:var(--brand)}
.tag.msh{background:var(--action-bg);color:var(--action)}
.tag.l1{background:var(--ok-bg);color:var(--ok)}
.tag.fbo{background:var(--surface-3);color:var(--text-muted)}
.tag.fbs{background:var(--surface-3);color:var(--text-muted)}
.tag.err{background:var(--danger-bg);color:var(--danger)}

.row-act{color:var(--text-dim);cursor:pointer;text-align:center}
tbody tr:hover .row-act{color:var(--action)}
.foot{display:flex;align-items:center;justify-content:space-between;padding:10px 2px;color:var(--text-dim);font-size:var(--fs-sm)}

/* Доля выкупа: зелёный от 68%, оранжевый от 50, красный ниже. Пороги из
   расчёта Future в EcomRazbor. */
.num.ok{color:var(--ok)}