/* КАРТОЧКА АРМА */
/*Сама карточка*/
div.users-view div.arms-card {
    background-color: slategray;
    border-radius: 2pt 12pt 2pt 12pt;
    /* правый верхний и левый нижний — срез 45° в тон ярлычкам
       (corner-shape: Chromium 139+; без поддержки остаётся скругление) */
    corner-shape: round bevel round bevel;
    color: whitesmoke;
    font-family: 'Roboto Condensed', sans-serif;
    margin-bottom: 5px;
}
/* номер АРМ */

div.arms-card .mb-3,
div.arms-card p {margin-bottom: 0.6rem !important;}

div.arms-card div.tree-level-2 div.progress {margin: 0; padding: 0;}
div.arms-card div.tree-level-2 div.progress div.progress-bar {margin-top: 1px; margin-bottom: 1px; padding: 0;}

div.arms-card span.arms-item,
div.arms-card span.techs-item {font-family: 'Stencil', Helvetica, sans-serif; font-size: 112%}
div.arms-card h3 {font-weight: bold; font-size: 42px; padding: 10pt 0 0 20pt;}
div.arms-card h3 span.arms-item { font-family: 'Stencil', Helvetica, sans-serif;}

div.arms-card h4 {width: 100%;  display: block; margin: 0; text-align: center;}

div.arms-card div.row {margin-left: 8pt;}
div.arms-card div.comment-block {font-weight: 150; text-align: center}
div.arms-card div.comment-block img.exclamation-sign {width: 30pt; height: 30pt; filter: invert(100%)}

div.arms-card div.port-links {width: max-content; float: right}

    /* подсвечиваемый кликабельный блок */
div.arms-card span.clickable {cursor: pointer; padding: 0 10pt}
div.arms-card span.clickable:hover {background-color: darkgray}
div.arms-card span.clickable:hover:before {content: '⌵   '}
div.arms-card span.clickable:hover:after {content: '   ⌵'}

/* ссылочки */
div.arms-card a,
div.arms-card a:visited { color: silver; text-decoration: none;}
div.arms-card a:hover   { color: yellow; text-decoration: none;}

div.arms-card span.net-ips-item {border-radius: 0}
div.arms-card span.net-ips-item a {color: white; font-family: 'Roboto Condensed',sans-serif; margin: 0 1.5pt}
div.arms-card span.net-ips-item a:hover {color: yellow}

/* ярлычок статуса */
div.arms-card span.unit-status {float: right; width: 30%; text-align: center; border-radius: 0 12pt 0 0; corner-shape: round bevel round round;}
span.unit-status {float: right; width: 30%; text-align: center; border-radius: 0}

div.arms-card span.it-staff {
    width: 100%;
    text-align: right;
    display: block;
    padding-right:4pt;
    padding-bottom:2pt;
}

/* разделители «вырезают» карточку цветом фона страницы — поэтому не white,
   а var(--bs-body-bg): в светлой это тот же белый, в тёмной — тёмный фон */
div.arms-card span.divider1 {
    display: block; width: 100%; height: 10pt; margin: 2pt 0; padding: 0;
    background: linear-gradient(to right, var(--bs-body-bg), var(--bs-body-bg) 1%,transparent 1%,transparent 99%, var(--bs-body-bg) 99%);
}

span.divider2-striped,
div.arms-card span.divider2 {
    display: block; width: 100%; height: 15pt; margin: 2pt 0; padding: 0;
    background: repeating-linear-gradient(120deg, transparent,transparent 5px, var(--bs-body-bg) 6px, var(--bs-body-bg) 10px, transparent 11px);
}

/* блок в рамочке */
div.arms-card div.data-block {
    margin: 4pt;
    padding: 0 4pt;
    border: solid silver 1px;
}

div.arms-card div.tree-level-2 div.comps-card {background-color: #7f8f9f; padding: 0; margin: 6pt 2pt;}
div.arms-card div.tree-level-2 {font-size: 80%;}
div.arms-card div.tree-level-2 h1 {font-size:16pt; margin: 2pt 0 0 2pt; padding: 0;}
div.arms-card div.tree-level-2 h4,
div.arms-card div.tree-level-2 h5 {font-size:10pt; margin: 0; padding: 0; text-align: left}
div.arms-card div.tree-level-2 span.unit-status {float: right; width: 20%; text-align: right; border-radius: 0;}
div.arms-card div.tree-level-2 div {margin: 2pt;}

/*
div.arms-card div.data-block.tree-level-2 div.comps-card {background-color: #7f8f9f; padding: 0; margin: 6pt 2pt;}
div.arms-card div.data-block.tree-level-2 {font-size: 80%;}
div.arms-card div.data-block.tree-level-2 h1 {font-size:16pt; margin: 2pt 0 0 2pt; padding: 0;}
div.arms-card div.data-block.tree-level-2 h4 {font-size:10pt; margin: 0; padding: 0; text-align: left}
div.arms-card div.data-block.tree-level-2 span.unit-status {float: right; width: 20%; text-align: right; border-radius: 0;}
div.arms-card div.data-block.tree-level-2 div {margin: 2pt;}
*/

div.arms-card div.tree-level-2.network-link-add {width:20px; height: 20px; text-align: center}




span.mac_address {
    font-family: monospace;
}

/* Розетки корпуса в раскладке портов: состояние слота - токен, дефолт светлой
   темы здесь, тёмные значения в themes.css (конвенция docs/dev/themes.md §2.3) */
.ports-map-slot {
	background: var(--ports-slot-bg, transparent);
	color: var(--ports-slot-fg, inherit);
	border-color: var(--ports-slot-border, var(--bs-border-color)) !important;
}
.ports-map-slot.slot-ok       {--ports-slot-bg: #6c757d; --ports-slot-fg: #fff; --ports-slot-border: #6c757d}
.ports-map-slot.slot-seen     {--ports-slot-bg: #dee2e6; --ports-slot-fg: #212529}
.ports-map-slot.slot-foreign,
.ports-map-slot.slot-quiet    {--ports-slot-bg: #fff3cd; --ports-slot-fg: #664d03; --ports-slot-border: #ffc107}
.ports-map-slot.slot-replaced,
.ports-map-slot.slot-added    {--ports-slot-bg: #d1e7dd; --ports-slot-fg: #0a3622; --ports-slot-border: #198754}
.ports-map-slot.slot-transit  {--ports-slot-bg: #ced4da; --ports-slot-fg: #212529}
.ports-map-slot.slot-disabled {--ports-slot-bg: #e9ecef; --ports-slot-fg: #6c757d}
.ports-map-slot.slot-self     {--ports-slot-bg: #fff3cd; --ports-slot-fg: #664d03; --ports-slot-border: #ffc107}

/* Раскладка портов (PortsLayoutWidget): строка таблицы, поставленная на попа
   над своей розеткой. Розетки и подписи лежат в ОДНОЙ сетке - только так
   подпись гарантированно указывает на свой порт, а не на соседний; ширину
   колонки задаёт сам виджет переменной --ports-layout-slot, по своим данным */
.ports-layout {
	/* лента корпусов: строки (пояснения - ряд - ряд - пояснения - подпись)
	   ОБЩИЕ для всех блоков через subgrid, иначе блоки встают на разной
	   высоте и панель читается как две разные железки. Не влезло по ширине -
	   прокручивается, а не ломается на этажи */
	display: none;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	grid-template-rows: auto auto auto auto auto;
	align-items: end;
	gap: 0 1rem;
	overflow-x: auto;
}
/* режим выбран кнопкой на блоке портов: раскладка вместо таблицы */
.ports-view-layout .ports-layout { display: grid; }
.ports-view-layout .ports-classic { display: none; }

.ports-layout-block {
	display: grid;
	grid-row: 1 / -1;
	grid-template-rows: subgrid;
	grid-template-columns: repeat(var(--ports-layout-columns, 24), var(--ports-layout-slot, 3.6em));
	gap: 2px;
}
/* каждая часть знает свою строку общей сетки: у однорядного блока (SFP)
   розетки встают в ту же строку, что верхний ряд двухрядного */
.ports-layout-cell.up { grid-row: 1; }
.ports-layout-row-1 { grid-row: 2; }
.ports-layout-row-2 { grid-row: 3; }
.ports-layout-cell.down { grid-row: 4; }
.ports-layout-title { grid-row: 5; grid-column: 1 / -1; }

.ports-layout-slot {
	/* розетка не растягивается на всю колонку: колонка бывает широкой (её
	   размер диктуют подписи), а корпус с розетками в палец шириной перестаёт
	   быть похож на корпус */
	width: 100%;
	max-width: 3.2em;
	justify-self: center;
	line-height: 1.8em;
	align-self: center;
}
/* пояснение читается при наклоне головы к своей половине корпуса: у верхнего
   ряда снизу вверх, у нижнего сверху вниз - и в обоих случаях НАЧАЛО текста
   стоит у розетки, к которой оно относится. Флексом текст центруется по
   ширине колонки: колонка узкая, и подпись, прижатая к краю, указывала бы
   на соседнюю розетку */
.ports-layout-cell {
	display: flex;
	writing-mode: vertical-rl;
	/* safe: пока строки влезают в колонку - по центру над своей розеткой; как
	   только перестали - прижимаются к началу, чтобы обрезалось лишнее с конца,
	   а не имя порта */
	align-items: safe center;
	font-size: .8rem;
	line-height: 1.0;
	/* строки ячейки ложатся рядом (в вертикальном письме новая строка идёт
	   вбок) - в ширину колонки их входит три; что не влезло, читается в
	   подсказке ячейки и целиком в таблице */
	width: 100%;
	overflow: hidden;
}
.ports-layout-cell.up {
	transform: rotate(180deg);
	justify-content: flex-start;
}
.ports-layout-cell.down { justify-content: flex-start; }
/* выноска к розетке: длинное тире в начале колонки. В вертикальном письме оно
   встаёт чёрточкой вдоль колонки - подпись отходит от своего порта линией, а
   не прижимается к нему вплотную. В подсказке ячейки его нет: это оформление */
.ports-layout-text::before {
	content: '— ';
	color: var(--bs-secondary-color, #6c757d);
}
.ports-layout-text {
	white-space: nowrap;
	overflow: hidden;
	/*text-overflow: ellipsis;*/
	/* колонка не растёт бесконечно: длинная цепочка связей растянула бы панель
	   на два экрана. Что не поместилось - в подсказке ячейки и в таблице */
	/*max-height: 34em;*/
}
/* значки и пометки поворачиваются ВМЕСТЕ с подписью - горизонтальная плашка
   посреди повёрнутой колонки рвёт строку и растаскивает соседей. Исключение -
   ИКОНКИ: галочка или плюс, положенные на бок, не читаются как галочка и плюс */
.ports-layout-cell .badge {
	/* значок - такой же, как в таблице, только повёрнут вместе с подписью */
	padding: .15em .4em;
	font-weight: normal;
}
.ports-layout-cell i,
.ports-layout-cell select { transform: rotate(90deg);}
/* кусок подписи = ячейка строки таблицы: идут они друг за другом ВДОЛЬ
   колонки, а своя вторая строка (VLAN под портом, находки под связью)
   разворачивается вбок - поэтому inline-block, а не общий поток */
.ports-layout-part {
	display: inline-block;
	margin-inline-end: .7em;
	vertical-align: top;
}
.ports-view-diagonal .ports-layout-cell {
	/* довёрнутая подпись и так уходит вбок от своей колонки - обрезать её по
	   ширине колонки значило бы оставить от неё одно слово */
	overflow: visible;
}
.ports-view-diagonal .ports-layout-cell .ports-layout-text {
	transform-origin: 50% 0;
}
.ports-view-diagonal .ports-layout-cell.up .ports-layout-text {
	transform: rotate(45deg);
}
.ports-view-diagonal .ports-layout-cell.down .ports-layout-text {
	transform: rotate(-45deg);
}
/* довёрнутые подписи вылезают вбок за последнюю колонку - оставляем им место */
.ports-view-diagonal .ports-layout { padding-right: 12em; }

/* галочка «ёлочкой» имеет смысл только в раскладке */
.ports-layout-diagonal-toggle { display: none; }
.ports-view-layout .ports-layout-diagonal-toggle { display: inline-flex; }

/* кнопка предложения в таблице блочная (плюс под плюсом), в колонке - строчная */
.ports-layout-cell button.d-block { display: inline-block !important; }