/* ============================================================
   ФАЙЛОВОЕ ХРАНИЛИЩЕ — Neastar.ru
   Версия: 2.0
   ============================================================ */

/* ============================================================
   1. ГЛОБАЛЬНЫЕ СТИЛИ
   Сброс отступов, базовые настройки шрифтов и фона
   ============================================================ */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: Arial, sans-serif;
	background: #f0f2f5; /* Светло-серый фон страницы */
	padding: 20px;
}
.container {
	max-width: 1000px; /* Максимальная ширина контента */
	margin: 0 auto; /* Центрирование по горизонтали */
}
/* ============================================================
   2. КАРТОЧКИ (ОСНОВНЫЕ БЛОКИ)
   Белые блоки с тенью — основная структура страницы
   ============================================================ */

.card {
	background: white;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* ============================================================
   3. ШАПКА САЙТА (HEADER)
   Логотип, статус пользователя, кнопки входа/выхода
   ============================================================ */

.header {
	display: flex;
	justify-content: space-between; /* Разносим элементы по краям */
	align-items: center;
	flex-wrap: wrap; /* Перенос на мобильных */
	gap: 15px;
}
h1 {
	color: #1a73e8; /* Фирменный синий Google */
	display: flex;
	align-items: center;
	gap: 10px;
}
.user-status {
	font-size: 0.9em;
	color: #666;
	display: flex;
	align-items: center;
	gap: 6px;
}
.admin-badge {
	background: #e74c3c; /* Красный для статуса админа */
	color: white;
	padding: 2px 12px;
	border-radius: 12px;
	font-size: 0.7em;
	margin-left: 6px;
}
/* ============================================================
   4. УНИВЕРСАЛЬНЫЕ КНОПКИ
   Единый стиль для всех кнопок с возможностью переопределения
   ============================================================ */

.btn {
	padding: 8px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none; /* Убираем подчёркивание у ссылок-кнопок */
	display: inline-flex; /* Для вертикального центрирования иконок */
	align-items: center;
	gap: 6px;
	font-size: 0.9em;
	transition: background 0.2s, transform 0.1s; /* Плавные переходы */
}
/* Иконки внутри кнопок — единый размер */
.btn svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0; /* Не даём иконке сжиматься */
}
/* ===== ГРУППЫ КНОПОК ПО НАЗНАЧЕНИЮ ===== */

/* Вход в админку */
.btn-login {
	background: #1a73e8;
	color: white;
}
.btn-login:hover {
	background: #1557b0;
}
/* Выход из админки */
.btn-logout {
	background: #e74c3c;
	color: white;
}
.btn-logout:hover {
	background: #c0392b;
}
/* Скачивание файла */
.btn-download {
	background: #27ae60; /* Зелёный — действие "скачать" */
	color: white;
}
.btn-download:hover {
	background: #229954;
}
/* Удаление файла */
.btn-delete {
	background: #e74c3c; /* Красный — опасное действие */
	color: white;
}
.btn-delete:hover {
	background: #c0392b;
}
/* Копирование ссылки */
.btn-copy {
	background: #3498db; /* Голубой — копирование */
	color: white;
}
.btn-copy:hover {
	background: #2980b9;
}
/* Очистка всех файлов */
.btn-clear {
	background: #e67e22; /* Оранжевый — предупреждение */
	color: white;
}
.btn-clear:hover {
	background: #d35400;
}
/* Основная кнопка загрузки */
.btn-upload {
	padding: 10px 30px;
	background: #1a73e8;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1em;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: background 0.2s;
}
.btn-upload:hover {
	background: #1557b0;
}
.btn-upload:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
/* Кнопка "Открыть ссылку" */
.btn-open-link {
	background: #27ae60;
	color: white;
	padding: 8px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.9em;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.btn-open-link:hover {
	background: #229954;
}
/* Редактирование срока хранения */
.btn-edit {
	background: #f39c12; /* Жёлтый — изменение */
	color: white;
}
.btn-edit:hover {
	background: #e67e22;
}
/* ============================================================
   5. ФОРМА ЗАГРУЗКИ
   Поля выбора файла, выбора срока и кнопка отправки
   ============================================================ */

.upload-form {
	display: flex;
	flex-direction: column; /* Вертикальное расположение */
	gap: 15px;
	align-items: stretch;
}
/* Ряд с полями выбора (файл + срок) */
.upload-form .form-row {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
}
/* Группа полей — метка + инпут */
.upload-form .form-group {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 1; /* Равномерное распределение ширины */
}
/* Метки полей */
.upload-form .form-group label {
	font-size: 0.85em;
	color: #666;
	font-weight: bold;
	display: flex;
	align-items: center;
	gap: 6px;
}
.upload-form .form-group label svg {
	width: 18px;
	height: 18px;
}
/* Поле выбора файла — пунктирная рамка как у dropzone */
.upload-form input[type="file"] {
	padding: 10px;
	border: 2px dashed #ccc;
	border-radius: 4px;
	cursor: pointer;
	width: 100%;
	transition: border-color 0.3s;
}
.upload-form input[type="file"]:hover {
	border-color: #1a73e8;
}
/* Выпадающий список срока хранения */
.upload-form select {
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 0.95em;
	background: white;
	min-width: 150px;
	cursor: pointer;
}
.upload-form select:focus {
	outline: none;
	border-color: #1a73e8;
}
/* Кнопка загрузки — выравнивание по левому краю */
.upload-form .btn-upload {
	align-self: flex-start;
}
/* ============================================================
   6. СООБЩЕНИЯ (УВЕДОМЛЕНИЯ)
   Успех или ошибка после действий
   ============================================================ */

.message {
	padding: 15px;
	border-radius: 4px;
	margin-bottom: 15px;
}
/* Успешное сообщение — зелёное */
.message-success {
	background: #d4edda;
	color: #155724;
	border: 1px solid #c3e6cb;
}
/* Сообщение об ошибке — красное */
.message-error {
	background: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
}
/* Блок со ссылкой внутри сообщения */
.message .link-container {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.message .link-container input {
	width: 100%;
	padding: 8px;
	border: 1px solid #c3e6cb;
	border-radius: 4px;
	background: white;
	font-size: 0.9em;
}
.message .link-container .btn-row {
	display: flex;
	gap: 10px;
	margin-top: 10px;
	flex-wrap: wrap;
}
/* ============================================================
   7. СПИСОК ФАЙЛОВ (АДМИНКА)
   Отображение каждого файла с информацией и кнопками
   ============================================================ */

.file-list {
	margin-top: 20px;
}
/* Один элемент файла в списке */
.file-item {
	display: flex;
	flex-direction: column;
	padding: 15px;
	border-bottom: 1px solid #eee;
	gap: 10px;
}
.file-item:last-child {
	border-bottom: none; /* Убираем линию у последнего */
}
/* Ряд с чекбоксом и информацией */
.file-item .file-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
/* Чекбокс для массового выделения */
.file-item .file-row input[type="checkbox"] {
	margin-top: 4px;
	width: 18px;
	height: 18px;
	cursor: pointer;
	flex-shrink: 0;
}
/* Информационная часть файла */
.file-info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
}
/* Имя файла */
.file-name {
	font-weight: bold;
	color: #333;
}
/* Размер файла */
.file-size {
	color: #666;
	font-size: 0.9em;
	margin-left: 10px;
}
/* Бейдж с расширением файла */
.file-extension {
	background: #e8f0fe;
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 0.75em;
	color: #1a73e8;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.file-extension svg {
	width: 14px;
	height: 14px;
}
/* Дата загрузки */
.file-date {
	color: #999;
	font-size: 0.8em;
	display: flex;
	align-items: center;
	gap: 4px;
}
.file-date svg {
	width: 14px;
	height: 14px;
}
/* Дата истечения срока */
.file-expires {
	color: #e67e22;
	font-size: 0.8em;
	display: flex;
	align-items: center;
	gap: 4px;
}
.file-expires svg {
	width: 14px;
	height: 14px;
}
/* Статистика (количество скачиваний) */
.file-stats {
	font-size: 0.85em;
	color: #666;
	display: flex;
	align-items: center;
	gap: 4px;
}
.file-stats svg {
	width: 16px;
	height: 16px;
}
/* Бейдж с числом скачиваний */
.file-downloads {
	background: #e8f0fe;
	padding: 2px 10px;
	border-radius: 12px;
	display: inline-block;
}
/* Кнопки действий с файлом */
.file-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 5px;
}
.file-actions .btn {
	padding: 8px 25px;
	font-size: 0.9em;
}
/* Сообщение "Нет файлов" */
.empty {
	text-align: center;
	color: #999;
	padding: 40px;
}
/* ============================================================
   8. ССЫЛКА И КНОПКА КОПИРОВАТЬ
   Блок с прямой ссылкой на файл и кнопкой копирования
   ============================================================ */

.link-container {
	display: flex;
	flex-direction: column; /* Ссылка сверху, кнопка снизу */
	align-items: flex-start;
	gap: 8px;
	margin-top: 5px;
	width: 100%;
}
/* Поле со ссылкой — на всю ширину */
.link-container input {
	width: 100%;
	padding: 6px 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 0.85em;
	background: #f9f9f9;
	cursor: default; /* Не даём редактировать */
}
/* Кнопка копирования */
.link-container .btn-copy {
	padding: 6px 20px;
	font-size: 0.85em;
}
/* ============================================================
   9. TOAST (ВСПЛЫВАЮЩЕЕ УВЕДОМЛЕНИЕ)
   Показывается при копировании ссылки
   ============================================================ */

.toast {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: #333;
	color: white;
	padding: 12px 24px;
	border-radius: 4px;
	display: none; /* Скрыт по умолчанию */
	z-index: 1000;
	align-items: center;
	gap: 8px;
	animation: fadeInUp 0.3s ease-out;
}
.toast svg {
	width: 20px;
	height: 20px;
}

/* Анимация появления тоста */
@keyframes fadeInUp {
 from {
 opacity: 0;
 transform: translateY(20px);
}
to {
	opacity: 1;
	transform: translateY(0);
}
}
/* ============================================================
   10. СТАТИСТИКА ХРАНИЛИЩА
   Информация о занятом месте, лимитах и количестве файлов
   ============================================================ */

.stats-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 15px;
	padding-top: 15px;
	border-top: 2px solid #eee;
	flex-wrap: wrap;
	gap: 10px;
}
.stats-bar span {
	color: #666;
	font-size: 0.9em;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}
/* Один элемент статистики */
.stats-bar .stat-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-right: 15px;
}
.stats-bar .stat-value {
	font-weight: bold;
	color: #1a73e8;
}
/* Прогресс-бар использования места */
.progress-bar {
	width: 100%;
	height: 6px;
	background: #e9ecef;
	border-radius: 3px;
	margin-top: 10px;
	overflow: hidden;
}
.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #1a73e8, #34a853); /* Градиент синий → зелёный */
	border-radius: 3px;
	transition: width 0.3s; /* Плавное изменение при обновлении */
}
/* Счётчик файлов */
.file-count {
	background: #e8f0fe;
	padding: 2px 12px;
	border-radius: 12px;
	font-size: 0.9em;
}
/* ============================================================
   11. МОДАЛЬНОЕ ОКНО ВХОДА
   Появляется при нажатии кнопки "Войти как админ"
   ============================================================ */

.login-modal {
	display: none; /* Скрыто по умолчанию */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
	z-index: 999;
	justify-content: center;
	align-items: center;
}
.login-modal.active {
	display: flex; /* Показываем при активном классе */
}
/* Белая карточка модального окна */
.login-box {
	background: white;
	padding: 40px;
	border-radius: 8px;
	width: 100%;
	max-width: 400px;
	animation: scaleIn 0.3s ease-out;
}

/* Анимация появления */
@keyframes scaleIn {
 from {
 opacity: 0;
 transform: scale(0.9);
}
to {
	opacity: 1;
	transform: scale(1);
}
}
.login-box h2 {
	color: #1a73e8;
	margin-bottom: 20px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.login-box h2 svg {
	width: 28px;
	height: 28px;
}
.login-box input[type="password"] {
	width: 100%;
	padding: 12px;
	border: 2px solid #ddd;
	border-radius: 4px;
	margin-bottom: 15px;
	font-size: 16px;
	outline: none;
	transition: border-color 0.3s;
}
.login-box input[type="password"]:focus {
	border-color: #1a73e8;
}
.login-box .btn {
	width: 100%;
	padding: 12px;
	font-size: 16px;
	justify-content: center;
}
/* Кнопка закрытия модального окна */
.login-box .close {
	float: right;
	cursor: pointer;
	font-size: 24px;
	color: #999;
	background: none;
	border: none;
	transition: color 0.2s;
}
.login-box .close:hover {
	color: #333;
}
/* ============================================================
   12. ИНФОРМАЦИОННЫЕ БЛОКИ
   ============================================================ */

/* Имя файла в сообщении (выделение) */
.filename-display {
	font-weight: bold;
	color: #1a73e8;
}
/* Блок с информацией о хранилище (админка) */
.info-box {
	background: #e8f0fe;
	padding: 10px 15px;
	border-radius: 4px;
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}
.info-box .label {
	color: #666;
}
.info-box .value {
	font-weight: bold;
	color: #1a73e8;
}
.info-box .warning {
	color: #e67e22;
}
.info-box .danger {
	color: #e74c3c;
}
.info-box span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.info-box svg {
	width: 18px;
	height: 18px;
}
/* Блок с лимитами (для всех пользователей) */
.limit-info {
	margin-top: 10px;
	padding: 10px;
	background: #f8f9fa;
	border-radius: 4px;
	font-size: 0.9em;
	color: #666;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.limit-info .highlight {
	color: #1a73e8;
	font-weight: bold;
}
.limit-info span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.limit-info svg {
	width: 18px;
	height: 18px;
}
/* Шапка с именем файла и тегами */
.file-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
/* Путь к файлу на сервере (техническая информация) */
.server-path {
	font-size: 0.75em;
	color: #999;
	background: #f5f5f5;
	padding: 2px 8px;
	border-radius: 4px;
	font-family: monospace;
}
/* ============================================================
   13. БЕЙДЖИ СРОКА ХРАНЕНИЯ
   ============================================================ */

/* Длительный срок (зелёный) */
.lifetime-badge {
	background: #e8f5e9;
	color: #2e7d32;
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 0.75em;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
/* Короткий срок (оранжевый) */
.lifetime-badge-short {
	background: #fff3e0;
	color: #e65100;
	padding: 2px 10px;
	border-radius: 12px;
	font-size: 0.75em;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.lifetime-badge svg, .lifetime-badge-short svg {
	width: 14px;
	height: 14px;
}
/* Вспомогательный класс для иконок с текстом */
.icon-text {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
/* ============================================================
   14. ПАНЕЛЬ СОРТИРОВКИ
   Выбор поля и направления сортировки
   ============================================================ */

.sort-panel {
	display: flex;
	gap: 15px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 15px;
	padding: 10px;
	background: #f8f9fa;
	border-radius: 4px;
}
.sort-panel .sort-label {
	font-weight: bold;
	color: #666;
}
/* Ссылка-кнопка сортировки */
.sort-panel .sort-link {
	padding: 6px 14px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 0.85em;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: background 0.2s, color 0.2s;
}
/* Активная сортировка (выделена синим) */
.sort-panel .sort-link.active {
	background: #1a73e8;
	color: white;
}
/* Неактивная сортировка */
.sort-panel .sort-link.inactive {
	background: #e8f0fe;
	color: #1a73e8;
}
.sort-panel .sort-link.inactive:hover {
	background: #d2e3fc;
}
/* Информация о количестве и странице */
.sort-panel .sort-info {
	margin-left: auto;
	color: #999;
	font-size: 0.85em;
}
/* Выбор количества на страницу */
.sort-panel select {
	padding: 5px 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: white;
	cursor: pointer;
	font-size: 0.9em;
}
.sort-panel select:focus {
	outline: none;
	border-color: #1a73e8;
}
/* ============================================================
   15. МАССОВЫЕ ДЕЙСТВИЯ
   Панель с кнопками для работы с несколькими файлами
   ============================================================ */

.bulk-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 15px;
	flex-wrap: wrap;
}
.bulk-actions .btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
/* ============================================================
   16. ПАГИНАЦИЯ
   Постраничная навигация
   ============================================================ */

.pagination {
	display: flex;
	justify-content: center;
	gap: 5px;
	margin-top: 20px;
	flex-wrap: wrap;
}
.pagination .btn {
	padding: 8px 14px;
	font-size: 0.85em;
}
/* Активная страница — зелёная */
.pagination .btn.active {
	background: #27ae60;
	color: white;
}
/* Неактивная страница — голубая */
.pagination .btn.inactive {
	background: #e8f0fe;
	color: #1a73e8;
}
.pagination .btn.inactive:hover {
	background: #d2e3fc;
}
/* Многоточие между страницами */
.pagination .btn-dots {
	padding: 8px 12px;
	color: #999;
}
/* ============================================================
   17. ПРОГРЕСС-БАР ЗАГРУЗКИ
   Отображается во время отправки файла
   ============================================================ */

.progress-container {
	margin-top: 10px;
	padding: 10px;
	background: #f8f9fa;
	border-radius: 4px;
	display: none; /* Скрыт по умолчанию */
}
/* Заголовок прогресса — "Загрузка... 45%" */
.progress-container .progress-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 5px;
	font-size: 0.85em;
	color: #666;
}
/* Внешняя рамка прогресс-бара */
.progress-container .progress-bar-outer {
	width: 100%;
	height: 6px;
	background: #e9ecef;
	border-radius: 3px;
	overflow: hidden;
}
/* Заполнение прогресс-бара */
.progress-container .progress-bar-inner {
	width: 0%;
	height: 100%;
	background: linear-gradient(90deg, #1a73e8, #34a853);
	border-radius: 3px;
	transition: width 0.3s;
}

/* ============================================================
   18. АДАПТИВНОСТЬ (МОБИЛЬНЫЕ УСТРОЙСТВА)
   Стили для экранов шириной до 768px
   ============================================================ */

@media (max-width: 768px) {
    /* Файл — элементы в колонку */
    .file-item .file-row {
 flex-direction: column;
 align-items: stretch;
}

    /* Кнопки действий — в строку на всю ширину */
    .file-actions {
 flex-direction: row;
 width: 100%;
}
 .file-actions .btn {
 flex: 1;
 text-align: center;
 justify-content: center;
}

    /* Форма загрузки — вертикально */
    .upload-form {
 flex-direction: column;
 align-items: stretch;
}
 .upload-form input[type="file"] {
 width: 100%;
}
 .upload-form .form-group {
 width: 100%;
}
 .upload-form .btn-upload {
 width: 100%;
 align-self: stretch;
 justify-content: center;
}

    /* Шапка — вертикально */
    .header {
 flex-direction: column;
 align-items: flex-start;
}

    /* Модальное окно — отступы */
    .login-box {
 margin: 20px;
}

    /* Сообщения — кнопки в колонку */
    .message .link-container .btn-row {
 flex-direction: column;
}
 .message .link-container .btn-row .btn {
 width: 100%;
 text-align: center;
 justify-content: center;
}

    /* Статистика — в колонку */
    .stats-bar {
 flex-direction: column;
 align-items: flex-start;
}

    /* Инфоблоки — в колонку */
    .info-box {
 flex-direction: column;
 gap: 5px;
}

    /* Лимиты — каждый на новой строке */
    .limit-info span {
 display: flex;
 margin-left: 0 !important;
 margin-top: 5px;
}

    /* Панель сортировки — вертикально */
    .sort-panel {
 flex-direction: column;
 align-items: flex-start;
}
 .sort-panel .sort-info {
 margin-left: 0;
}

    /* Массовые действия — вертикально */
    .bulk-actions {
 flex-direction: column;
 align-items: stretch;
}
 .bulk-actions .btn {
 justify-content: center;
}
}

/* ============================================================
   19. АНИМАЦИИ
   ============================================================ */

/* Анимация для спиннера (используется в JS) */
@keyframes spin {
 0% {
 transform: rotate(0deg);
}
 100% {
 transform: rotate(360deg);
}
}