/*
 * Лаборатория Кошмарского — css/nora/img0417.css
 * Глава 1 норы: окно «Свойства: IMG_0417.png», средство просмотра и значки рабочего стола.
 * Общий вид окон — в css/nora.css, здесь только то, что нужно этой главе. Префикс классов i417-.
 */

/* ===== ОКНО «СВОЙСТВА» ===== */
.i417-window {
    max-width: 480px;
}

/* В узком окне колонка названий уже, чем в общем стиле (170px) */
.i417-window .nora-prop__name {
    flex-basis: 150px;
}

.i417-nowrap {
    white-space: nowrap;
}

/* Текст только для читалок экрана: на экране его нет, но место в разметке есть */
.i417-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.i417-muted {
    color: #6D6D6D;
}

.i417-small {
    font-size: 12px;
}

.i417-caption {
    margin: 10px 0 4px;
}

.i417-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    margin-top: 6px;
}

.i417-right .i417-small {
    margin-right: auto;
}

.i417-path {
    /* длинный сетевой путь переносится по любому символу, а не раздвигает окно */
    word-break: break-all;
}

/* Маленькая кнопка внутри строки свойства («Изменить…», «Разблокировать») */
.i417-btn--small {
    min-width: 0;
    margin: 0 0 0 8px;
    padding: 1px 10px;
    font-size: 12px;
}

.i417-prop--btn .nora-prop__value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.i417-prop--btn .i417-btn--small {
    margin-left: auto;
}

.i417-appicon {
    margin-right: 6px;
    color: #3C7FB1;
}

.i417-note {
    color: #333333;
}

.i417-note .i417-btn--small {
    display: block;
    margin: 6px 0 0 auto;
}

/* ===== ШАПКА ВКЛАДКИ «ОБЩИЕ»: МИНИАТЮРА И ИМЯ ===== */
.i417-head {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #DDE2E8;
    margin-bottom: 10px;
}

.i417-thumb {
    flex: 0 0 auto;
    width: 104px;
    height: 60px;
    margin-right: 14px;
    padding: 3px;
    background: #ffffff;
    border: 1px solid #C9CED6;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
    cursor: pointer;
}

.i417-thumb:hover {
    border-color: #7DA2CE;
}

.i417-thumb:focus {
    outline: 1px dotted #000000;
}

.i417-thumb img {
    display: block;
    width: 96px;
    height: 52px;
    /* картинка маленькая: без сглаживания пиксели остаются четкими квадратами */
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
}

.i417-name {
    flex: 1;
    min-width: 0;
    margin: 0;
}

/* Строки «Используется» выглядят как текст, но откликаются на щелчок */
.i417-use {
    cursor: default;
}

/* ===== ТАБЛИЦЫ ВКЛАДОК «ПОДРОБНО» И «ВЕРСИИ» =====
   У общей .nora-table минимальная ширина 560px; в узком окне она не нужна */
.i417-list {
    max-height: 330px;
}

.i417-list--short {
    max-height: 120px;
}

.i417-table {
    min-width: 0;
}

.i417-table td {
    white-space: normal;
}

.i417-table td:first-child {
    width: 38%;
    color: #333333;
}

/* Заголовок группы свойств: «Описание», «Источник»… с линией до края, как в Windows 7 */
.i417-group td {
    padding-top: 8px;
    color: #1E395B;
    background: #ffffff;
}

.i417-table tr.i417-group:hover td {
    background: #ffffff;
}

.i417-group td::after {
    content: '';
    display: block;
    height: 1px;
    margin-top: 3px;
    background: #DDE2E8;
}

.i417-stars {
    color: #B5B5B5;
    letter-spacing: 1px;
}

.i417-ficon {
    margin-right: 6px;
    color: #4A6C94;
}

/* ===== СКРЫТЫЙ ЭЛЕМЕНТ: НОМЕР ПАРТИИ =====
   Цвет как у текста, без подчеркивания; выдает себя только курсором-вопросом и пунктиром */
.i417-batch {
    color: inherit;
    font-size: 12px;
    white-space: nowrap;
    cursor: help;
}

.i417-batch:hover {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: #6A7B91;
}

.i417-batch:focus {
    outline: 1px dotted #6A7B91;
}

.i417-under {
    margin: 10px 0 0;
}

/* Кнопка, похожая на ссылку Windows 7 (синий текст, подчеркивание при наведении) */
.i417-link {
    padding: 0;
    background: none;
    border: 0;
    color: #0066CC;
    font: inherit;
    cursor: pointer;
}

.i417-link:hover {
    text-decoration: underline;
}

/* ===== ВКЛАДКА «БЕЗОПАСНОСТЬ» ===== */
.i417-objname {
    display: flex;
    flex-wrap: wrap;
}

.i417-objname .i417-muted {
    margin-right: 6px;
}

.i417-groups {
    margin: 0;
    padding: 2px;
    max-height: 110px;
    overflow-y: auto;
    list-style: none;
    background: #ffffff;
    border: 1px solid #8DA2BD;
}

.i417-group-item {
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: default;
}

.i417-group-item i {
    width: 18px;
    margin-right: 6px;
    color: #4A6C94;
    text-align: center;
}

.i417-group-item:hover {
    background: #E5F3FB;
    border-color: #B8D6FB;
}

.i417-group-item.is-selected {
    background: linear-gradient(#DCEBFC, #C1DBFC);
    border-color: #7DA2CE;
}

.i417-group-item:focus {
    outline: 1px dotted #000000;
}

.i417-perm {
    margin-top: 10px;
    border: 1px solid #C9CED6;
}

.i417-perm__table {
    width: 100%;
    border-collapse: collapse;
}

.i417-perm__table th {
    padding: 4px 8px;
    background: #F4F6F9;
    border-bottom: 1px solid #DDE2E8;
    color: #1E395B;
    font-weight: normal;
    text-align: left;
}

.i417-perm__table td {
    padding: 2px 8px;
}

.i417-perm__col,
.i417-perm__table .i417-perm__cell {
    width: 76px;
    text-align: center;
}

.i417-perm__table .nora-check {
    margin: 0;
}

.i417-perm__table .nora-check input {
    margin: 0;
}

/* Запрет у экземпляра — бордовым, как строка заключенного в карантине */
.i417-perm__row--deny td:first-child {
    color: #6B1A1E;
}

/* ===== ВКЛАДКА «ПРЕДЫДУЩИЕ ВЕРСИИ» ===== */
.i417-vhead {
    display: flex;
    align-items: flex-start;
}

.i417-vhead__icon {
    flex: 0 0 auto;
    margin: 2px 12px 0 2px;
    color: #3C7FB1;
    font-size: 26px;
}

.i417-vprev {
    display: flex;
    align-items: center;
    min-height: 125px;
    margin-top: 8px;
    padding: 8px;
    background: #F7F8FA;
    border: 1px solid #DDE2E8;
}

.i417-vprev__empty {
    width: 100%;
    color: #8A94A0;
    text-align: center;
}

.i417-vprev__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* У атрибута hidden низкий приоритет: display: flex выше его перебил бы */
.i417-vprev__item[hidden] {
    display: none;
}

.i417-vprev__img,
.i417-template {
    flex: 0 0 auto;
    display: block;
    max-width: 100%;
    height: auto;
    margin-right: 12px;
    border: 1px solid #C9CED6;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
}

.i417-vprev__text {
    flex: 1 1 140px;
    padding: 4px 0;
    color: #4C607A;
    font-size: 12px;
}

/* ===== СРЕДСТВО ПРОСМОТРА ===== */
.i417-viewer {
    max-width: 640px;
}

.i417-viewer[hidden] {
    display: none;
}

.i417-stage {
    max-height: 480px;
    overflow: auto;
    padding: 18px;
    background: #E9EDF2;
    text-align: center;
}

/* Холст растягивается под масштаб из JS; метка генератора лежит поверх картинки */
.i417-canvas {
    position: relative;
    display: inline-block;
    background: #ffffff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .3);
    line-height: 0;
}

.i417-canvas img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
}

.i417-mark {
    position: absolute;
    top: 6%;
    left: 3%;
    color: #B3B3B3;
    font-family: Consolas, 'Courier New', monospace;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
}

/* ===== ЗНАЧКИ РАБОЧЕГО СТОЛА =====
   Стоят в левом верхнем углу «рабочего стола»; на узком экране им нет места */
.i417-desk {
    position: absolute;
    top: 28px;
    left: 24px;
    width: 92px;
}

.i417-icon {
    width: 88px;
    margin-bottom: 14px;
    padding: 4px 2px;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #ffffff;
    font-size: 12px;
    text-align: center;
    text-shadow: 0 1px 2px #000000, 0 0 4px #000000;
    cursor: default;
}

.i417-icon:hover {
    background: rgba(160, 200, 240, .18);
    border-color: rgba(190, 220, 250, .35);
}

.i417-icon.is-selected {
    background: rgba(120, 170, 230, .35);
    border-color: rgba(190, 220, 250, .6);
}

.i417-icon__pic {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    color: #C9D3DE;
    font-size: 30px;
}

.i417-icon__pic--img img {
    display: block;
    width: 44px;
    height: 24px;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px #000000;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
}

.i417-icon__label {
    display: block;
    margin-top: 3px;
    overflow-wrap: break-word;
}

@media (max-width: 1100px) {
    .i417-desk {
        display: none;
    }
}

/* ===== ТЕЛЕФОН ===== */
@media (max-width: 600px) {
    .i417-head {
        flex-wrap: wrap;
    }

    .i417-thumb {
        margin-bottom: 8px;
    }

    .i417-table td:first-child {
        width: 42%;
    }

    .i417-perm__col,
    .i417-perm__table .i417-perm__cell {
        width: 64px;
    }

    .i417-stage {
        padding: 8px;
    }

    .i417-vprev__img,
    .i417-template {
        margin: 0 0 6px;
    }
}