html,body {height:100%}
body {background-color:#0c0c1c;color:#ccc;font-family:"Roboto Flex",sans-serif;font-size:14px;margin:0}

.loader-cont {display:flex;align-items:center;justify-content:center;height:100%}
.loader {width:40px;height:40px;border:5px solid #474747;border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}
@keyframes rotation {0% {transform:rotate(0deg)} 100% {transform:rotate(360deg)}}

.wrapper {display:flex;height:100%}
.left-panel {flex:0 1 400px;display:flex;flex-direction:column;padding:10px 0 0}
.right-panel {flex:1 1 100%;display:flex;flex-direction:column;padding:10px 10px 0 0}
.right-top {flex:0 0 400px;display:flex}
.w {background-color:#10152c;flex:1 1 100px; margin:0 0 10px 10px;display:flex;flex-direction:column}
.wh {background-color:#2b3c7f;padding:5px 8px 5px;font-size:16px;flex:0 1 15px}
.wb {flex:1 1 100px}
.wb.scrolled {height:100%;overflow-y:auto}

#status {flex:0 1 300px}
#history {flex:1 1 300px}
#details {flex:1 1 600px}
#graph {flex:1 1 1500px}

.btn {font-size:10px;display:inline-block;margin:1px 0 0;cursor:pointer;padding:2px 5px;background:#549cc7;vertical-align:top;border-radius:3px;text-decoration:none;color:#fff}
.t-btn[data-value='0'] {background:#666}
.btn:hover {background:#65889e}
.reload-btn {font-size:13px;float:right;cursor:pointer;padding:1px;border-radius:3px}
.reload-btn:hover {background:#4e6395}
.btn[data-graph-id] {font-size:15px;line-height:15px;padding:1px;background:#0e8a8a}
.btn[data-graph-id]:hover {background:#11b1b1}
.all-orders-btn {margin-right:20px;}

/* Кнопки update/stop — POST-формы в заголовке «Статус» */
.inline-form {display:inline;margin:0}
button.btn {border:none;font-family:inherit}

.ml-30 {margin-left:30px}
.w-100 {width:100%}
.tar {text-align:right}
.tal {text-align:left}

ul {margin:7px 0;padding-left:25px;}

table {border-collapse: collapse}
thead {position:sticky;top:0;z-index:1;}
thead th {
    position: relative;
    z-index: 2;
    background-color: #161c38;
    color: #8aa0c8;
    box-shadow: inset 0 -2px 0 #2a3550;
}
th, td {padding:4px 5px; text-align:center}
th.sorting {cursor:pointer}
td {border-bottom:1px solid #2a3550}
.bl {border-left:1px solid #2a3550}
td.p-0 {padding:0}
.pale {color:#333}
.pre {background:#393323}
.red {color:#f85778}
.green {color:#1fc96e}
.graph-btn {padding:0 10px 0 0}

span[data-ol-id] {cursor:pointer}
span[data-ol-id]:hover {color:#ccc;border-bottom:1px dashed}
span[data-part-debug-id] {cursor:pointer}
span[data-part-debug-id]:hover {color:#ccc;border-bottom:1px dashed}
span[data-pin-id] {cursor:pointer}
span[data-pin-id]:hover {color:#ccc;border-bottom:1px dashed}

.zoom {
    cursor: move;
    fill: none;
    pointer-events: all;
}

#chartCont {position:relative}
#chartCont.loading .overlay {position:absolute; width:100%; height:100%; top:0; left:0; background:#000000dd}
#chartCont:not(.show-e) .el-e {display:none}
#chartCont:not(.show-r) .el-r {display:none}
#chartCont:not(.show-ea) .el-ea {display:none}
#chartCont:not(.show-ra) .el-ra {display:none}

path.earnings {
    fill: none;
    stroke: #71b19d;
    stroke-width: 1px;
}
path.bot-earnings {
    fill: none;
    stroke: #71b19d;
    stroke-width: 1px;
}
path.revenue {
    fill: none;
    stroke: #badd7e;
    stroke-width: 1px;
}
path.earnings1 {
    fill: none;
    stroke: #dda67e;
    stroke-width: 1px;
}
path.bot-revenue {
    fill: none;
    stroke: #badd7e;
    stroke-width: 1px;
}
path.earnings-avg {
    fill: none;
    stroke: #7e8edd;
    stroke-width: 1px;
}
path.revenue-avg {
    fill: none;
    stroke: #6bf63d;
    stroke-width: 1px;
}
path.pin {
    fill: #6629ff;
    stroke: #6629ff;
}
path.pin.rev {
    fill: #f31515;
    stroke: #f31515;
}
line.pin1 {
    stroke: #6629ff;
}
line.pin1.rev {
    stroke: #f31515;
}
path.pin:not(.open) {
    fill-opacity: .3;
}
line.sep {
    stroke: #3a3a3c;
    stroke-width: 1px;
    stroke-opacity: .5;
}
line.extrE {
    stroke: #71b19d;
    stroke-width: 1px;
    stroke-opacity: .3;
}
line.extrR {
    stroke: #badd7e;
    stroke-width: 1px;
    stroke-opacity: .3;
}
.pin.empt {
    opacity: .3;
}
line.target {
    stroke-width: 4;
    stroke-opacity: .3;
}
line.target.eTarget {
    stroke: #999;
}
line.target.rTarget {
    stroke: #975454;
}
.eTarget-mode .eTarget {
    stroke-width: 2;
    stroke-opacity: 1;
}
.rTarget-mode .rTarget {
    stroke-width: 2;
    stroke-opacity: 1;
}

.rTarget-mode .el-e {display:none}
.eTarget-mode .el-r {display:none}

/* ---- Строки таблиц: hover ---- */
/* Только для «обычных» строк; active / hl / group управляются отдельно */
.tr-cursor tr:not(.group):not(.active):not(.hl):hover td {
    background-color: rgba(255, 255, 255, 0.04);
}

/* ---- Активная (выбранная) строка ---- */
.tr-cursor tr.active td {
    background-color: #1f3a5c;   /* насыщеннее базового, но не кричит */
    color: #e8f4ff;
}
.tr-cursor tr.active td:first-child {
    box-shadow: inset 3px 0 0 #549cc7;   /* голубая полоса слева */
}

/* ---- Заголовок группы ---- */
tr.group td {
    background-color: #1a2340;
    color: #b3d9ff;
    font-weight: 600;
}
tr.group:not(:first-child) td {
    border-top: 2px solid #549cc7;   /* акцентная линия между группами */
}
.tr-cursor tr.group:hover td {
    background-color: #222d50;          /* мягкий hover, группу тоже можно навести */
}

/* ---- Подсвеченная часть в details ---- */
tr.hl td {
    background-color: #241a3a;          /* фиолетовый, из палитры pin */
}
tr.hl td:first-child {
    box-shadow: inset 3px 0 0 #6629ff;  /* фиолетовая полоса слева */
}

/* ---- Pin status badges (таблица вилок) ---- */
.pin-status {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    line-height: 1.5;
    white-space: nowrap;
}
.pin-status.ps-new              { background: #333;     color: #aaa; }
.pin-status.ps-open-incomplete  { background: #5c1c1c;  color: #ffb3b3; }
.pin-status.ps-opened           { background: #1c3a5c;  color: #b3d9ff; }
.pin-status.ps-partially-closed { background: #4a3a10;  color: #ffd97a; }
.pin-status.ps-open-pending     { background: #2a4a5c;  color: #b3e0ff; }
.pin-status.ps-close-incomplete { background: #7a1a1a;  color: #fff; }
.pin-status.ps-rejected         { background: #4a1a2a;  color: #ffb3b3; }
.pin-status.ps-close-pending    { background: #4a3a10;  color: #ffd97a; }
.pin-status.ps-closed           { background: #1a3a20;  color: #a3e6b3; }
.pin-status.ps-resolved         { background: #2a3550; color: #8aa0c8; }

/* ---- Прогресс закрытия в таблице вилок ---- */
.progress-cell { min-width: 70px; }
.progress { height: 4px; background: #222c3a; border-radius: 2px; overflow: hidden; }
.progress-bar { height: 100%; background: #549cc7; transition: width .2s; }
.progress-label { font-size: 9px; color: #888; }

/* Прогресс для CLOSE_INCOMPLETE — часть закрыта, но не до конца */
.progress-cell.progress-warn .progress-bar { background: #c74f2b; }
.progress-cell.progress-warn .progress-label { color: #ffb3b3; }

/* ---- Режим «без графика»: history + details на всю высоту ---- */
body.no-graph .right-top { flex: 1 1 100%; }
body.no-graph #graph { display: none; }

/* Кнопка переключения режима */
.btn.mode-btn { min-width: 24px; text-align: center; }
.btn.mode-btn.mode-on  { background: #0e8a8a; }
.btn.mode-btn.mode-off { background: #666; }

/* ---- Parts table: группировка future/share ---- */
.parts-table thead { z-index: 10; }
.parts-table thead tr.group-header th {
    font-size: 10px;
    color: #8aa0c8;
    padding: 2px 5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
}
.parts-table thead tr:last-child th {
    box-shadow: inset 0 -2px 0 #2a3550;
}

/* ---- Parts table: sticky первые две колонки (ID, rev) ---- */
.parts-table tbody tr:not(.pre) td:nth-child(1),
.parts-table tbody tr:not(.pre) td:nth-child(2) {
    position: sticky;
    z-index: 5;
    background-color: var(--sticky-bg, #10152c);
    box-sizing: border-box;
}
.parts-table tbody tr:not(.pre) td:nth-child(1) { left: 0;    width: 50px; min-width: 50px; max-width: 50px; }
.parts-table tbody tr:not(.pre) td:nth-child(2) { left: 50px; width: 34px; min-width: 34px; max-width: 34px; }

.parts-table thead tr:last-child th:nth-child(1),
.parts-table thead tr:last-child th:nth-child(2) {
    position: sticky;
    z-index: 11;
    background-color: #161c38;
    box-sizing: border-box;
}
.parts-table thead tr:last-child th:nth-child(1) { left: 0;    width: 50px; min-width: 50px; max-width: 50px; }
.parts-table thead tr:last-child th:nth-child(2) { left: 50px; width: 34px; min-width: 34px; max-width: 34px; }

/* Фон sticky-колонок в разных состояниях */
.parts-table tr.active { --sticky-bg: #1f3a5c; }
.parts-table tr.hl     { --sticky-bg: #241a3a; }
.parts-table tr.pre    { --sticky-bg: #393323; }
.parts-table tr.debug  { --sticky-bg: #1a1a20; }

/* Hover на всю строку, включая sticky-ячейки.
   Специфичность (0,6,3) выше, чем у sticky-правила (0,3,3),
   поэтому фон применяется и к первым двум колонкам тоже. */
.parts-table tbody tr:not(.pre):not(.debug):not(.active):not(.hl):hover td {
    background-color: #1a1e30;
}

/* ---- Parts table: скрытие debug-частей ---- */
.parts-table tr.debug:not(.show-debug) { display: none; }
.parts-table tr.debug.show-debug { display: table-row; }

/* Кнопка переключения debug-частей в шапке виджета */
.btn.debug-btn[data-debug='0'] { background: #666; }
.btn.debug-btn[data-debug='1'] { background: #0e8a8a; }

/* ---- Индикация загрузки на кнопках-триггерах ---- */
.btn.loading {
    pointer-events: none;
    opacity: 0.6;
    position: relative;
}
.btn.loading::after {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 6px;
    border: 2px solid currentColor;
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: btnSpin .8s linear infinite;
    vertical-align: middle;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ---- Details: статус-строка ---- */
.pin-status-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-bottom: 1px solid #2a3550;
    font-size: 13px;
}
.pin-status-line .pin-status { margin-right: 4px; }
.pin-metric {
    display: inline-block;
    white-space: nowrap;
}
.pin-metric.pale { color: #666; }

/* ---- Details: рынок по ногам ---- */
.pin-market {
    padding: 6px 8px;
    border-bottom: 1px solid #2a3550;
    font-size: 12px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.pin-market-row {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
}
.pin-market-row .leg-label {
    font-weight: 600;
    color: #8aa0c8;
}
.pin-market-row .leg-prices {
    color: #ccc;
}
.pin-market-row .leg-state {
    text-align: right;
    font-family: "Roboto Flex", sans-serif;
    font-size: 12px;
}
.pin-market-row .leg-state .pale { margin-left: 4px; }

/* ---- Details: warning ---- */
.pin-warning {
    padding: 6px 8px;
    border-bottom: 1px solid #2a3550;
    background: rgba(199, 79, 43, 0.1);
    color: #ffb3b3;
    font-size: 12px;
}
.pin-warning > div { padding: 1px 0; }

/* ---- Details: действия ---- */
.pin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid #2a3550;
}
.btn.pin-action { font-size: 11px; padding: 4px 10px; }
.btn.pin-action.danger { background: #7a1a1a; }
.btn.pin-action.danger:hover { background: #a02828; }

/* PartStatus в parts-table */
.ps-debug        { color: #555; }
.ps-new          { color: #888; }
.ps-pending      { color: #ffd97a; }
.ps-incomplete   { color: #f85778; }
.ps-complete     { color: #1fc96e; }
.ps-rejected     { color: #f85778; font-weight: 600; }