/* products/products-stats.css */

:root {
--stats-gap: 1rem;
--stats-radius: 12px;
--stats-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
--stats-border-color: rgba(0, 0, 0, 0.08);
--stats-muted: rgba(0, 0, 0, 0.5);
--stats-bg-card: #ffffff;
--stats-bg-page: #f5f5f5;
}

/* Базовая обёртка страницы */
body {
margin: 0;
padding: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #b6b8be;
background: #2b303a;
}

/* Верхняя навигация */
.stats-top-nav {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background-color: #ffffff;
border-bottom: 1px solid var(--stats-border-color);
font-size: 0.9rem;
}

.stats-top-nav a {
text-decoration: none;
color: inherit;
opacity: 0.9;
}

.stats-top-nav a:hover {
text-decoration: underline;
}

.stats-top-nav__current {
font-weight: 600;
opacity: 0.8;
}

/* Основной контейнер */
.stats-page {
max-width: 1100px;
margin: 0 auto;
padding: 1.25rem 1rem 2.5rem;
}

/* Заголовок */
.stats-header {
margin-bottom: 1rem;
}

.stats-header h1 {
font-weight: 100;
color: #6bebbd;
margin: 0 0 0 0px;
}

.stats-subtitle {
margin: 0 0 20px 0;
font-size: 14px;
color: #ffffff70;
}

.stats-updated {
margin: 0px 0px 30px 0px;
color: #ffffff80;
font-size: 14px;
}

/* Карточки суммарной статистики */
.stats-summary {
display: grid;
gap: 7px;
margin: 0px 0px 10px 0px;
grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
}

.stat-card {
background: #3c414d;
border-radius: 15px;
padding: 16px;
color: white;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.stat-label {
font-size: 12px;
color: #6bebbd;
}

.stat-value {
font-size: 37px;
font-weight: 100;
}

/* Фильтры */
.stats-filters {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 11px;
margin-bottom: 1rem;
justify-content: center;
}

.stats-filter {
display: flex;
flex-direction: column;
gap: 0.25rem;
font-size: 0.9rem;
}

.stats-filter label {
color: #ffffff80;
}

.stats-filter select {
min-width: 120px;
border: 0px solid #999999;
background: #eeeff2;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url(/img/icon24+.png);
background-repeat: no-repeat;
background-position: 108px 13px;
background-size: 12px;
cursor: pointer;
outline: 0;
font-size: 14px;
padding: 8px 0px 8px 9px;
color: #000000;
width: 130px;
flex-shrink: 0;
border-radius: 6px;
}

/* Статусы загрузки и ошибки */
.stats-loading,
.stats-error {
font-size: 0.9rem;
margin-bottom: 0.75rem;
}

.stats-loading {
color: var(--stats-muted);
}

.stats-error {
color: #b00020;
}

/* ТОП-блоки */
.stats-tops {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--stats-gap);
margin-bottom: 1.25rem;
}

.top-block {
background-color: #3c414d;
border-radius: 20px;
padding: 13px;
color: #fff;
overflow: hidden;
}

.top-title {
font-weight: 400;
text-align: center;
margin: -13px -13px 13px -13px;
background: #474b57;
padding: 10px;
color: #ffffff91;
font-size: 15px;
}

.top-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 5px;
}

.top-list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 14px;
}

.top-pos {
font-weight: 500;
margin-right: 0.25rem;
min-width: 1.5rem;
}

/* Миниатюра в блоках ТОП */
.top-thumb {
flex: 0 0 auto;
display: flex;
}

.top-thumb__img {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 7px;
background-color: #f8f8f8;
}


.top-pos {
font-weight: 500;
margin-right: 0.25rem;
}

.top-link {
flex: 1 1 auto;
max-width: 70%;
color: inherit;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

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

.top-metric {
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
color: #ffffff;
background: #0000004d;
padding: 5px 9px;
border-radius: 7px;
}

.top-metric img {
max-height: 11px;
max-width: 17px;
opacity: 0.6;
}

.top-empty {
font-size: 0.8rem;
color: var(--stats-muted);
}

/* Таблица */
.stats-table {
width: 100%;
border-collapse: collapse;
background: #474b57;
border-radius: 20px;
overflow: hidden;
font-size: 12px;
color: white;
text-align: left;
}

.stats-table thead {
background: #3c414d;
}

.stats-table th, .stats-table td {
padding: 0px 5px;
border-bottom: 1px solid #2b303a85;
vertical-align: middle;
line-height: 1.2;
}

.stats-table th {
font-weight: 400;
color: #6fffbeba;
padding: 10px 5px;
}

/* Сортируемые заголовки */
.stats-table th[data-sort-key] {
cursor: pointer;
position: relative;
padding-right: 5px;
}

.stats-table th[data-sort-key]::after {
content: "⇅";
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
font-size: 17px;
opacity: 0.25;
}

.stats-table th[data-sort-key].sorted-asc::after {
content: "▲";
opacity: 0.8;
}

.stats-table th[data-sort-key].sorted-desc::after {
content: "▼";
opacity: 1;
background: #00a782;
color: white;
height: 20px;
width: 20px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}

.stats-table tbody tr:nth-child(even) {
background-color: rgba(0, 0, 0, 0.01);
}

.stats-table tbody tr:hover {
background-color: #00000026;
}

/* Кликабельные строки таблицы */
.stats-table tbody tr[data-url] {
cursor: pointer;
}


/* Колонки */
.col-thumb {
text-align: center;
}

.thumb-img {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 8px;
background-color: #f8f8f8;
display: block;
}

.col-name a {
color: inherit;
text-decoration: none;
}

.col-name a:hover {
text-decoration: underline;
}

.col-category {
white-space: nowrap;
}

.col-price {
white-space: nowrap;
}

.col-likes,
.col-calls,
.col-shares,
.col-views {
/* text-align: right; */
white-space: nowrap;
}

.col-updated {
white-space: nowrap;
}

/* Пустое состояние */
.stats-table-empty {
/* text-align: center; */
padding: 1rem;
font-size: 0.9rem;
color: var(--stats-muted);
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .stats-page {
    padding: 0.75rem 0.5rem 2rem;
    }

    .stats-table th,
    .stats-table td {
    padding: 0.4rem 0.45rem;
    }

    .col-category,
    .col-price,
    .col-updated {
    white-space: normal;
    }

    .top-link {
    max-width: 60%;
    }
}