/*
 * Вертикалното мени (compact-small).
 *
 * Темата го крои на 100px со текст од 14px и растојание од 1px меѓу буквите.
 * Македонските називи не се собираат во тоа, па „Прашања“ се кршеше на
 * „Прашањ / а“. Тука лентата е малку поширока, текстот помал и во еден ред.
 *
 * Селекторите ја повторуваат длабочината на темата само за да ја надгласат —
 * фајлот се вчитува последен, по style.css и responsive.css.
 */

:root {
    --makbis-rail: 112px;
}

/* --- ширина на лентата и отстапот на содржината --- */
.page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper > div {
    width: var(--makbis-rail);
}

/* responsive.css става `margin-left: 100px !important` на содржината за секој
   екран до 1800px, без оглед дали лентата е отворена. Затоа содржината не се
   враќаше лево кога менито ќе се затвори — а со лента од 112px имаше и преклоп
   од 12px. !important се надгласува само со !important. */
.page-wrapper.compact-small .page-body-wrapper .page-body,
.page-wrapper.compact-small .page-body-wrapper .footer {
    margin-left: var(--makbis-rail) !important;
    transition: margin-left .3s ease;
}

/* Затворено мени — содржината се шири по целата ширина. */
.page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper.close_icon ~ .page-body,
.page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper.close_icon ~ .footer {
    margin-left: 0 !important;
}

/* На тесни екрани лентата лебди над содржината (темата ја затвора сама под
   1184px), па содржината оди по целата ширина во двата случаи. */
@media (max-width: 1199px) {
    .page-wrapper.compact-small .page-body-wrapper .page-body,
    .page-wrapper.compact-small .page-body-wrapper .footer {
        margin-left: 0 !important;
    }
}

/* --- ставките --- */
.page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list {
    padding: 14px 6px;
    transition: background-color .2s ease;
}

.page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list:hover {
    background-color: #26374a;
}

/* Текстот во еден ред. Ако некој иден назив сепак е предолг,
   се скратува со „…“ — насловот на врската го носи целиот. */
.page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: none;
}

.page-wrapper.compact-small .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list .sidebar-link svg {
    width: 22px;
    height: 22px;
    margin: 0 auto 8px;
}

/* --- разделник „Админ“ --- */
.page-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list.makbis-section {
    padding: 12px 6px 6px;
    text-align: center;
    pointer-events: none;
}

.page-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .sidebar-list.makbis-section span {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

/* =====================================================================
   Екраните за одговарање
   ===================================================================== */

/*
 * Насловот на категоријата беше невидлив: темата вели
 * `.bg-light { background-color: #F5F6F9 !important; color: #fff }` —
 * бело врз речиси бело. Затоа лентата има свој стил, без bg-light.
 */
.category-block > .category-head {
    background-color: #eef2f7;
    color: #1f2f3e;
    border-left: 3px solid #33bfbf;
}

.category-block > .category-head:hover {
    background-color: #e4eaf3;
}

.category-block > .category-head strong {
    color: #1f2f3e;
    font-size: 14px;
    letter-spacing: .2px;
}

/* Бројачот исто така беше бел врз светло (`.badge` носи color:#fff). */
.category-block > .category-head .cat-count {
    background-color: #fff;
    color: #1f2f3e;
    border: 1px solid #d9e1ec;
    font-weight: 600;
}

/* Лентата се клика за да се собере — стрелката го кажува тоа. */
.category-block > .category-head .cat-caret {
    transition: transform .2s ease;
    color: #6b7c8f;
}

.category-block > .category-head.collapsed .cat-caret {
    transform: rotate(-90deg);
}

/* =====================================================================
   Слики на корисници
   ===================================================================== */

/*
 * Качените слики се со различни пропорции, па сите се сечат во круг со
 * object-fit — без ова, широка слика би се развлекла.
 */
.makbis-avatar-sm,
.makbis-avatar-md,
.makbis-avatar-lg {
    object-fit: cover;
    background-color: #eef2f7;
}

.makbis-avatar-sm {
    width: 36px;
    height: 36px;
}

.makbis-avatar-md {
    width: 72px;
    height: 72px;
}

.makbis-avatar-lg {
    width: 128px;
    height: 128px;
}

/* =====================================================================
   Паѓачко мени на корисникот во заглавието
   ===================================================================== */

/*
 * Темата го крои менито на 160px. По одземање на отстапите остануваат
 * околу 94px за текст — доволно за „Account“, но не и за „Мојата сметка“,
 * па зборот се прекршуваше под иконата.
 */
.page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown {
    width: 210px;
}

.page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown li a {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* Иконата останува цела и порамнета со средината на текстот,
   наместо да се стеснува или да виси на дното на редот. */
.page-wrapper .page-header .header-wrapper .nav-right .profile-dropdown li svg {
    flex-shrink: 0;
    vertical-align: middle;
}

/* =====================================================================
   Значки
   ===================================================================== */

/*
 * `.badge` во темата носи бела боја на текстот, а `.badge-light` светла
 * позадина — бело врз бело. Состојбата „Доделен“ се гледаше како празна
 * бела пилула. Истото важи и за `.badge-warning`, чија позадина е жолта.
 */
.badge.badge-light {
    background-color: #eef2f7;
    color: #1f2f3e;
    border: 1px solid #d9e1ec;
}

.badge.badge-warning {
    color: #1f2f3e;
}

/* =====================================================================
   Логоа на ЈКП
   ===================================================================== */

/* Логоата се со различни пропорции — се собираат во рамка без да се
   развлечат, за разлика од сликите на корисници кои се сечат во круг. */
.makbis-logo,
.makbis-logo-sm {
    object-fit: contain;
    background-color: #fff;
}

.makbis-logo {
    width: 96px;
    height: 96px;
    padding: 4px;
}

.makbis-logo-sm {
    width: 44px;
    height: 44px;
    padding: 2px;
}