@charset "utf-8";

/*
 * 2025 Dark Dayver <admin@foii.ru>
 *
 * Proprietary. All rights reserved.
 *
 * The code in this repository is the property of Dark Dayver and may not be used, copied, modified, or distributed
 * without explicit permission from the owner.
 *
 * Unauthorized use, reproduction, or distribution of this software is prohibited. Violators will be prosecuted to the
 * fullest extent of applicable laws.
 *
 * For inquiries about licensing or commercial use, please contact: admin@foii.ru
 */

body {
    background: #000000 url(../images/background.png);
    font: 14px Helvetica, sans-serif;
    color: #cccccc
}

.border-old {
    border: 10px solid transparent;
    border-image-source: url('../images/border-frame-old.png');
    border-image-slice: 40;
    border-image-repeat: repeat;
    max-width: 2048px;
    margin: 0 auto;
    width: 100%;
    padding: 0;
}

.border-neon {
    border: 10px solid transparent;
    border-image-source: url('../images/border-frame-neon.png');
    border-image-slice: 40;
    border-image-repeat: repeat;
    max-width: 2048px;
    margin: 0 auto;
    width: 100%;
    padding: 0;
}

.border-sci-fi {
    border: 10px solid transparent;
    border-image-source: url('../images/border-frame-sci-fi.png');
    border-image-slice: 40;
    border-image-repeat: repeat;
    max-width: 2048px;
    margin: 0 auto;
    width: 100%;
    padding: 0;
}

.border-space-opera {
    border: 10px solid transparent;
    border-image-source: url('../images/border-frame-space-opera.png');
    border-image-slice: 40;
    border-image-repeat: repeat;
    max-width: 2048px;
    margin: 0 auto;
    width: 100%;
    padding: 0;
}

.background-block {
    background: #141414 url(../images/background_block.png);
}

.menu-bar {
    display: flex;
    flex-wrap: wrap; /* Разрешаем перенос элементов */
    justify-content: space-between; /* Распределяем пространство */
    align-items: center; /* Выравниваем по центру */
    padding: 0.5rem;
    border-radius: 5px !important;
    gap: 0.5rem; /* Отступы между элементами */
}

.header-logo {
    background:
        left no-repeat url(../images/logo/left.png),
        right no-repeat url(../images/logo/right.png);
    background-size: contain;
}

header {
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

.layout-container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: 5px;
    overflow-y: auto; /* Разрешаем скролл */
    -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
/*    height: calc(100vh - 78px); /* Подставьте реальную высоту */
}

.media-unread {}

/* Стили для мобильных устройств */
@media (max-width: 768px) {
    body, html {
        height: 100%;
        overflow-x: hidden; /* Запрещаем горизонтальный скролл */
    }

    .menu-bar {
        flex-direction: column; /* Элементы в столбик */
        align-items: stretch; /* Растягиваем на всю ширину */
    }

    .menu-bar > * {
        width: 100%; /* Полная ширина для всех дочерних элементов */
        margin: 0.25rem 0; /* Отступы между элементами */
    }

    .ui.inverted.menu {
        flex-direction: column;
    }

    .ui.image.label {
        text-align: center;
    }

    .media-unread {
        margin-top: 10px !important;
    }

    .ui.dropdown .menu {
        position: static !important;
        width: 100%;
    }

    .layout-container {
        grid-template-columns: 1fr;
        height: auto;
/*        min-height: calc(100vh - 312px); */
        overflow-y: visible;
    }

    main {
        overflow-y: auto;
    }

    aside {
        order: 2;
    }

    header {
        display: none;
    }

    footer {
        order: 3;
    }

    /* Фикс для sticky-навбара */
    nav.ui.sticky {
        position: sticky;
        top: 0;
        z-index: 1000;
    }
}