/* admin_panel/style.css - Современный дизайн */

/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scrollbars */
}
::-webkit-scrollbar-track {
    background: #2a2a2a; /* Darker track */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #555; /* Medium gray thumb */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #777; /* Lighter gray on hover */
}

body {
    font-family: 'Inter', sans-serif; /* Использование Inter font */
    background-color: #0a0a0a; /* Очень темный фон */
}

/* Base styles for modal overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Более темный оверлей */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Class to show the modal */
.modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Styles for modal content */
.modal-content {
    background-color: #1a1a1a; /* Темный фон модалки */
    border-radius: 1rem; /* Более закругленные углы */
    padding: 2rem;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.7); /* Более выраженная тень */
    max-width: 90%;
    width: 450px; /* Немного шире */
    text-align: center;
    transform: translateY(-30px); /* Initial state for animation */
    opacity: 0; /* Initial state for animation */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Более плавная анимация */
    border: 1px solid #333; /* Тонкая рамка */
}

/* Animation for modal content when shown */
.modal-overlay.show .modal-content {
    transform: translateY(0);
    opacity: 1;
}

/* Common button styles */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3); /* Синяя тень */
}
.btn-primary:hover {
    box-shadow: 0 6px 15px rgba(0, 123, 255, 0.4);
}

.btn-secondary {
    @apply bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out;
    box-shadow: 0 4px 10px rgba(100, 100, 100, 0.2); /* Серая тень */
}
.btn-secondary:hover {
    box-shadow: 0 6px 15px rgba(100, 100, 100, 0.3);
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300 ease-in-out;
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3); /* Красная тень */
}
.btn-danger:hover {
    box-shadow: 0 6px 15px rgba(220, 53, 69, 0.4);
}

/* Common form input styles */
.form-input {
    @apply bg-gray-800 text-gray-100 border border-gray-700 rounded-lg py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200;
}

/* Tab navigation buttons */
.tab-button {
    @apply px-4 py-2 rounded-lg font-semibold text-gray-400 hover:text-white hover:bg-gray-700 transition duration-200 ease-in-out;
    /* Убраны border-t-2 и border-x-2 для более гладкого вида */
}
.tab-button.active {
    @apply bg-gray-700 text-white border-b-2 border-blue-500; /* Только нижняя граница для активной вкладки */
    box-shadow: inset 0 -2px 0 0 #3b82f6; /* Внутренняя тень для активной вкладки */
}

/* Table styles */
.table-header {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider bg-gray-700 rounded-t-lg;
    border-bottom: 1px solid #4a4a4a;
}
.table-cell {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-200;
}
.tracks-table-row:nth-child(even) {
    background-color: #2a2a2a; /* Чередующиеся строки для лучшей читаемости */
}
.tracks-table-row:hover {
    background-color: #3a3a3a; /* Эффект при наведении на строку */
    transition: background-color 0.2s ease-in-out;
}

/* Дополнительные стили для элементов формы */
input[type="file"] {
    @apply text-gray-300 file:mr-4 file:py-2 file:px-4
           file:rounded-full file:border-0
           file:text-sm file:font-semibold
           file:bg-blue-500 file:text-white
           hover:file:bg-blue-600 transition duration-200;
}