@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');

/* ====== ОБЩИЙ ФОН САЙТА ====== */
body {
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.42857143;
    color: #d1d0d2;
    background-color: #1a131f;
    margin: 0;
    padding: 0;
    display: flex;                /* центрирование */
    justify-content: center;      /* по горизонтали */
    align-items: flex-start;      /* по вертикали (чуть выше центра) */
    min-height: 100vh;            /* высота экрана */
}

::selection { /* задаём цвет выделения текста на сайте */
    background: #006109; /* цвет фона */
    color: #ffffff; /* цвет текста */
    text-shadow: none;
}

p {
	  font-family: 'Roboto', Arial, sans-serif;
	  font-size: 1.22em; /* размер шрифта для текста описаний */
      line-height: 1.5; /* межстрочный интервал */
	  white-space: pre-wrap; /* свободное форматирование текста, учитывает пробелы переносы и не выходит за пределы границы ширины внутри блока в котором находится */
}

/* ШАПКА */
    header {
	  position: fixed; /* фиксируем шапку сверху */
	  top: 0;       /* отступ сверху */
	  width: 100%;  /* резиновый макет ширины блока шапки */
	  z-index: 900; /* позиция шапки по отношению других блоков */
	  background: #26182f; /* цвет фона шапки */
}

    .blok-header {
	   margin: 0 auto;    /* выравнивание блока шапки по центру */
	   max-width: 1300px; /* макс. ширина блок шапки */
}

				         /* | ------------------ | */
				         /* | --- СТИЛИ МЕНЮ --- | */
				         /* | ------------------ | */
						 
/* МЕНЮ ШАПКИ */
    nav {
	  margin: 0 auto;    /* выравнивание блока меню по центру */
	  max-width: 1000px; /* макс. ширина блок контента */
}

    .menu-header {
	  width: 100%;
	  text-align: center;
}
  
    .menu-header li {
	   display: inline-block; /* Делаем меню по горизонтали */
	   font-weight: 600;      /* толщина шрифта */
}
  
    .menu-header li a {
	   color: #eeeeee;        /* цвет текста меню */
	   text-decoration: none; /* убираем нижнее подчёркивание */
	   padding: 1px 5px;      /* отступы сверху\снизу 1 слева\справо 5 */
	   display: block;
	   text-transform: uppercase; /* заголовок всегда заглавными буквами */
}

    .menu-header li a:hover {
	   color: #58c93a; /* цвет текста при наведении стрелки мышки */
}

				     /* | ------------------------- | */
				     /* | --- СТИЛИ ИЗОБРАЖЕНИЙ --- | */
				     /* | ------------------------- | */

/* ЛОГОТИП */
    .logo {
	  margin: 20px auto; /* отступ лого сверху и снизу 20 */
	  width: 100%;       /* адаптивная ширина изображения */
	  max-width: 300px;  /* максимальная ширина изображения */
	  display: block;
	  padding: 0 10px;    /* отступы слева\справо */
}


                      /* ====== ОБЁРТКА ТАБЛИЦЫ ====== */
.table-wrapper {
    width: 100%;       /* задаём резиновый макет ширины блока main */
	max-width: 1300px; /* задаём макс. ширину блока */
    background: #1a1a1a;          /* тёмный блок */
    padding: 25px;
    margin-top: 150px;
    border-radius: 8px;
    box-shadow: 0 0 25px rgba(0,0,0,0.7); /* мягкая тень */
}

/* ====== ВЕРХНЯЯ ПАНЕЛЬ ====== */
.table-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.table-search input,
.table-length select {
    background: #222;
    color: #ddd;
    border: 1px solid #444;
    padding: 5px 8px;
    border-radius: 4px;
	margin-left: 10px;
	margin-right: 10px;
	font-size: 15px;
}

/* Анимация появления */
@keyframes searchAppear {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ====== ТАБЛИЦА ====== */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

/* ====== ШАПКА ТАБЛИЦЫ ====== */
thead th {
    background: #004422;             /* зелёный как на скриншоте */
    text-align: left;
    padding: 12px 10px;
    border-right: 5px solid #333;    /* границы между столбцами */
}

/* Убираем правую границу у последнего столбца */
.table th:last-child {
    border-right: none;
}

thead th .sort-btn {
    background: #006633;
    border: none;
    color: #fff;
    padding: 3px 6px;
    margin-left: 8px;
    cursor: pointer;
    border-radius: 3px;
}

thead th .sort-btn:hover {
    background: #009944;
}

/* ====== СТРОКИ ТАБЛИЦЫ ====== */
tbody tr:nth-child(even) {
    background: #1f1f1f;
	font-size: 14px;
}

tbody tr:nth-child(odd) {
    background: #161616;
	font-size: 14px;
}

tbody td {
    padding: 8px 10px;
    border-top: 1px solid #333;
}

tbody a {
    color: #66ccff;
    text-decoration: none;
	transition: 0.25s;           /* плавная анимация */
}

tbody a:hover {
    color: #ffcc66;              /* светло-оранжевый */
    text-decoration: none;       /* подчёркивание не появляется */
}

/* ====== НИЖНЯЯ ПАНЕЛЬ ====== */
.table-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 14px;
}

/* ====== ПАГИНАЦИЯ ====== */
.table-pagination button {
    background: #222;
    color: #ddd;
    border: 1px solid #444;
    padding: 5px 8px;
    margin: 0 3px;
    cursor: pointer;
    border-radius: 4px;
}

.table-pagination button.active {
    background: #006633;
    border-color: #00aa55;
}

.table-pagination button:hover {
    background: #333;
}

/* ====== СТИЛЬ ПОЛЯ ПОИСКА (как на первом скриншоте) ====== */
.table-search input {
    width: 100%;
    max-width: 350px;
    padding: 10px 16px;
    font-size: 15px;
    background: #111;
    color: #e0e0e0;
    border: 2px solid #333;
    border-radius: 999px; /* ОЧЕНЬ овальная форма */
    outline: none;
    transition: 0.25s;
	animation: searchAppear 0.45s ease-out;
}


.table-search input {
    width: 350px;               /* как на скриншоте */
    padding: 10px 14px;
    font-size: 15px;
    background: #111;           /* глубокий тёмный фон */
    color: #e0e0e0;             /* светлый текст */
    border: 2px solid #333;     /* рамка как на первом скрине */
    border-radius: 6px;
    outline: none;
    transition: 0.25s;
}

.table-search input::placeholder {
    color: #777;                /* мягкий серый текст */
}

/* ====== Обводка при наведении ====== */
.table-search input:hover {
    border-color: #555;
    box-shadow: 0 0 6px rgba(255,255,255,0.15);
}

/* ====== Обводка при фокусе ====== */
.table-search input:focus {
    border-color: #00c060;
    box-shadow: 0 0 10px rgba(0,255,120,0.35);
}