/* 1. ПРИМУСОВЕ ВИРІВНЮВАННЯ ТАБЛИЦІ ТА СТАТЕЙ ЛІВОРУЧ */
.category-list table,
table.category,
.com-content-category__articles table {
    clear: both !important;        /* Переносить список під фільтри */
    display: table !important;
    width: 100% !important;        /* Розгортає на всю ширину, щоб текст не тулився праворуч */
    margin-top: 25px !important;   /* Охайний відступ від кнопок фільтра */
    text-align: left !important;
}

/* Вирівнюємо комірки з назвами статей ліворуч та додаємо відступ під стрілочку */
table.category td,
.category-list table td,
.com-content-category__articles table td {
    text-align: left !important;
    padding: 7px 0 7px 25px !important; /* 25px зліва — це місце для нашого маркера */
    position: relative !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
}

/* 2. МАЛЮЄМО ЧОРНУ СТРІЛОЧКУ ▸ ПЕРЕД КОЖНИМ РЯДКОМ */
table.category td::before,
.category-list table td::before,
.com-content-category__articles table td::before {
    content: "\25B8" !important;   /* Геометричний трикутник */
    position: absolute !important;
    left: 0 !important;
    top: 6px !important;
    color: #000000 !important;     /* Суворо чорний колір */
    font-size: 18px !important;
    line-height: 1 !important;
}

/* Оформлення посилань (робимо чорними, як на оригіналі) */
table.category td a,
.category-list table td a {
    color: #000000 !important;
    text-decoration: none !important;
}

table.category td a:hover,
.category-list table td a:hover {
    text-decoration: underline !important;
}

/* 3. ОЧИЩЕННЯ ВЕРХНЬОЇ ПАНЕЛІ (Ховаємо сміття) */
/* Повністю приховуємо службові написи "Таблиця статей" та "Заголовок" */
table.category thead,
.category-list table thead,
.com-content-category__articles table thead,
table.category caption,
.category-list caption {
    display: none !important;
}

/* Вирівнюємо панель фільтрів у рівний рядок */
.filters,
.com-content-category__filters {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Забороняємо переносы на новий рядок */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin-bottom: 25px !important;
    width: 100% !important;
}

/* Ховаємо дубльовану випадайку місяця, яка прилипла другою */
.filters select:nth-of-type(2),
.com-content-category__filters select:nth-of-type(2) {
    display: none !important;
}

/*
.filters select[name*="limit"], 
.com-content-category__filters select[id*="limit"],
.filters select:last-of-type,
#adminForm .list-limit {
    margin-left: auto !important;
}
*/




/*
#contentpage .wrap .content a {padding-left: 30px;  line-height: 1; font-weight: normal;}
#contentpage .wrap .content a:before {content: "›"; font-weight: bold; font-size: 35px; margin-right: 10px; text-decoration: none;}
*/

#contentpage .wrap .content a {
    display: flex;
    align-items: flex-start; /* Текст і стрілочка починаються з однієї лінії */
    width: 100% !important;
    padding-left: 0;        /* Скидаємо старий паддінг */
    line-height: 1.4;
    font-weight: normal;
    margin-bottom: 6px;     /* Охайний відступ між статтями */
}

#contentpage .wrap .content a:before {
    content: "›"; 
    font-weight: bold; 
    font-size: 35px;        /* Трохи зменшено розмір, щоб гліф не ламав рядок */
    line-height: 1;         /* Обнуляємо висоту шрифтового контейнера */
    margin-right: 15px;     /* Стабільний відступ від стрілочки до тексту */
    margin-top: -8px;       /* Ювелірне мікро-вирівнювання символу по центру першого рядка */
    display: inline-block;
    flex-shrink: 0;         /* Забороняє стрілочці стискатися при переносі тексту */
}

#adminForm .float-end {float: right;}

@media (max-width:640px){
	#adminForm .btn-group {margin-bottom: 10px;}
}




/* =========================================================
   ПАГІНАЦІЯ
========================================================= */

/* 1. КОНТЕЙНЕР НАВІГАЦІЇ — СКИДАННЯ ОБТІКАННЯ */
.com-content-category__navigation {
    display: block !important;
    clear: both !important;
    width: 100% !important;
    margin-top: 40px !important; /* Відступ від списку статей */
    text-align: center !important;
}

/* 2. ГОЛОВНИЙ ФІКС: Прибираємо стрілочки "›" статей з посилань пагінації */
.com-content-category__navigation a.page-link,
.com-content-category__navigation .page-link {
    display: flex !important;          /* Перетворюємо в малі блоки для центрування цифр */
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    padding-left: 0 !important;        /* Скидаємо 30px, які стоять на статтях */
    line-height: 1 !important;         /* Обнуляємо інтервали */
    margin-bottom: 0 !important;
}

/* Повністю видаляємо псевдоелемент стрілочки перед цифрами пагінації */
.com-content-category__navigation a.page-link:before {
    content: "" !important;
    display: none !important;
    margin-right: 0 !important;
}

/* 3. ВИРІВНЮВАННЯ ЦИФР ТА КНОПОК В ОДИН РЯДОК */
.com-content-category__pagination .pagination {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important; /* Центруємо пагінацію на сторінці */
    align-items: center !important;
    gap: 6px !important;               /* Відстань між кнопками */
    padding: 0 !important;
    margin: 20px 0 10px 0 !important;
    list-style: none !important;
}

.com-content-category__pagination .page-item {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. СТИЛІЗАЦІЯ КНОПОК ПАГІНАЦІЇ */



.com-content-category__pagination .page-link {
    display: flex !important;
    align-items: center !important;      /* Вирівнювання по вертикалі */
    justify-content: center !important;   /* Вирівнювання по горизонталі (строго центр) */
    min-width: 38px !important;
    width: 38px !important;              /* Робимо кнопки ідеально квадратними */
    height: 38px !important;
    padding: 0 !important;                /* Обнуляємо бічні паддінги, які штовхали текст вбік */
    text-align: center !important;
    line-height: 1 !important;
    border: 1px solid #cccccc !important; /* Акуратна сіра рамка */
    border-radius: 4px !important;
    cursor: pointer;
}


/* Ефект при наведенні курсору на кнопку сторінки */
.com-content-category__pagination .page-item a.page-link:hover {
    background-color: #f5f5f5 !important;
    border-color: #000000 !important;
}

/* Стиль для АКТИВНОЇ (поточної) сторінки */
.com-content-category__pagination .page-item.active .page-link {
    background-color: #424242 !important; /* Чорне тло */
    border-color: #000000 !important;
    color: #ffffff !important;            /* Біла цифра */
    font-weight: bold !important;
    cursor: default !important;
}

/* Стиль для НЕАКТИВНИХ кнопок (наприклад, стрілочки назад, коли ми на 1-й сторінці) */
.com-content-category__pagination .page-item.disabled .page-link {
    color: #bbbbbb !important;
    border-color: #e0e0e0 !important;
    background-color: #fafafa !important;
    cursor: not-allowed !important;
}

/* 5. СТИЛІЗАЦІЯ СУПЕРЕЧЛИВОГО ЛІЧИЛЬНИКА "Сторінка 1 із 4" */
.com-content-category__navigation .counter {
    display: block !important;
    float: none !important;             /* Скасовуємо оригінальний float-end */
    text-align: center !important;      /* Центруємо текст під або над кнопками */
    margin: 15px 0 0 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    color: #666666 !important;         /* Робимо колір спокійнішим сірим */
}


/* СТРІЛОЧКИ В ПАГІНАЦІЮ */

/* Повністю ховаємо старі зламані шрифтові іконки всередині пагінації */
.com-content-category__pagination [class^="icon-angle-"] {
    font-family: system-ui, -apple-system, sans-serif; /* Стабільний шрифт */
    display: inline-block;
    font-style: normal;
}

/* 1. Подвійна ліва стрілка «На початок» (ВЕЛИКА І ЖИРНА) */
.com-content-category__pagination .icon-angle-double-left::before {
    content: "\23EE";  /* Важкий медіа-символ подвійної стрілки ліворуч */
    font-size: 20px;    /* Збільшений розмір */
    color: #000000;
}

/* 2. Одинарна ліва стрілка «Назад» */
.com-content-category__pagination .icon-angle-left::before {
    content: "\276E";  /* Товстий шеврон ліворуч */
    font-size: 18px;
    color: #000000;
}

/* 3. Одинарна права стрілка «Вперед» */
.com-content-category__pagination .icon-angle-right::before {
    content: "\276F";  /* Товстий шеврон праворуч */
    font-size: 18px;
    color: #000000;
}

/* 4. Подвійна права стрілка «В кінець» (ВЕЛИКА І ЖИРНА) */
.com-content-category__pagination .icon-angle-double-right::before {
    content: "\23ED";  /* Важкий медіа-символ подвійної стрілки праворуч */
    font-size: 20px;
    color: #000000;
}

/* Ідеальне центрування нових важких символів всередині квадратів */
.com-content-category__pagination .page-link span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    line-height: 1;
}

.com-content-category__pagination .page-link span,
.com-content-category__pagination [class^="icon-angle-"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Фікс для великих подвійних медіа-стрілок, щоб вони не здавалися зміщеними */
.com-content-category__pagination .icon-angle-double-left::before,
.com-content-category__pagination .icon-angle-double-right::before {
    display: inline-block !important;
    line-height: 1 !important;
    text-indent: 0 !important;
}


/* =========================================================
   НАВІГАЦІЯ МІЖ СТАТТЯМИ (PREV / NEXT)
========================================================= */

/* Фікс глобальних стрілочок з минулих кроків */
#contentpage .wrap .content nav.pagenavigation a:before {
    display: none;
    content: "";
}

#contentpage .wrap .content nav.pagenavigation {
    margin: 70px 0 50px 0;
    width: 100%;
}

/* Сітка для карток */
#contentpage .wrap .content nav.pagenavigation .pagination {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Базова картка посилання */
#contentpage .wrap .content nav.pagenavigation a.previous,
#contentpage .wrap .content nav.pagenavigation a.next {
    display: flex;
    flex-direction: column; /* Елементи один під одним */
    justify-content: center;
    position: relative;
    min-height: 100px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ПОПЕРЕДНЯ СТАТТЯ: Текст суворо ліворуч */
#contentpage .wrap .content nav.pagenavigation a.previous {
    padding: 22px 30px 22px 65px; /* Простір зліва під стрілку */
    text-align: left;
    align-items: flex-start;     /* Штовхає підпис ліворуч */
}

/* НАСТУПНА СТАТТЯ: Текст суворо праворуч */
#contentpage .wrap .content nav.pagenavigation a.next {
    padding: 22px 65px 22px 30px; /* Простір справа під стрілку */
    text-align: right;
    align-items: flex-end;       /* Штовхає підпис праворуч */
}

/* ЕФЕКТ ПРИ НАВЕДЕННІ (Картка м'яко підводиться та підсвічується) */
nav.pagenavigation a.previous:hover,
nav.pagenavigation a.next:hover {
    background: #ffffff !important;
    border-color: #000000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}

/* Оформлення верхнього службового напису */
#contentpage .wrap .content nav.pagenavigation .visually-hidden {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    display: block;
    
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    color: #8a8a93;
    margin-bottom: 6px;
    line-height: 1.2;
}

/* Оформлення назви самої статті */
#contentpage .wrap .content nav.pagenavigation a.previous, 
#contentpage .wrap .content nav.pagenavigation a.next {
    font-size: 15px;
    line-height: 1.45;
    font-weight: 500;
    color: #111827;
}

/* СУЧАСНІ ЕЛЕГАНТНІ СТРІЛКИ */

/* Ліва стрілка */
#contentpage .wrap .content nav.pagenavigation a.previous::after {
    content: "➔";
    transform: scaleX(-1); /* Розвертає стрілку вліво */
    position: absolute;
    left: 24px;
    top: calc(50% - 13px);
    font-size: 22px;
    line-height: 1;
    color: #b4b4bb;
    transition: transform 0.2s ease, color 0.2s ease;
}

/* Права стрілка */
#contentpage .wrap .content nav.pagenavigation a.next::after {
    content: "➔";
    position: absolute;
    right: 24px;
    top: calc(50% - 13px);
    font-size: 22px;
    line-height: 1;
    color: #b4b4bb;
    transition: transform 0.2s ease, color 0.2s ease;
}

/* Мікро-анімація стрілок при наведенні */
#contentpage .wrap .content nav.pagenavigation a.previous:hover::after {
    color: #000000 !important;
    transform: scaleX(-1) translateX(4px); /* Смикається лівіше */
}

#contentpage .wrap .content nav.pagenavigation a.next:hover::after {
    color: #000000 !important;
    transform: translateX(4px);            /* Смикається правіше */
}

/* Ховаємо старі дефолтні іконки */
#contentpage .wrap .content nav.pagenavigation .icon-chevron-left,
#contentpage .wrap .content nav.pagenavigation .icon-chevron-right,
#contentpage .wrap .content nav.pagenavigation span[aria-hidden="true"] {
    display: none;
}

/* АДАПТИВНІСТЬ ДЛЯ МОБІЛЬНИХ (На телефонах повертаємо все ліворуч під великий палець) */
@media (max-width: 768px) {
    #contentpage .wrap .content nav.pagenavigation .pagination {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    #contentpage .wrap .content nav.pagenavigation a.next {
        text-align: left !;
        align-items: flex-start;
        padding: 22px 30px 22px 65px;
    }

    #contentpage .wrap .content nav.pagenavigation a.next::after {
        left: 24px;
        right: auto;
    }
    
    #contentpage .wrap .content nav.pagenavigation a.next:hover::after {
        transform: scaleX(1) translateX(-4px);
    }
}