/* ============================================ */
/* Adviral - Кастомные стили                    */
/* Дополнения и переопределения для Volt        */
/* ============================================ */

/* ===== Переменные цветов Adviral ===== */
:root {
    --adviral-primary: #1F2937;       /* Основной цвет (серый, как в Volt) */
    --adviral-secondary: #374151;     /* Вторичный цвет */
    --adviral-accent: #3B82F6;        /* Акцентный цвет (синий) */
    --adviral-success: #10B981;       /* Успех */
    --adviral-warning: #F59E0B;       /* Предупреждение */
    --adviral-danger: #E11D48;        /* Ошибка (розово-коралловый из Volt) */
}

/* ===== Переопределение кнопки Danger для соответствия Volt ===== */
.btn-danger {
    background-color: #E11D48 !important;
    border-color: #E11D48 !important;
    color: #ffffff !important;
}

.btn-danger:hover {
    background-color: #BE123C !important;
    border-color: #BE123C !important;
}

/* ===== Sidebar стили ===== */
.sidebar .nav-item.active .nav-link {
    background-color: rgba(59, 130, 246, 0.1);
    border-left: 3px solid var(--adviral-accent);
}

.sidebar .nav-item .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* ===== Таблицы ===== */
.table-hover tbody tr:hover {
    background-color: rgba(59, 130, 246, 0.05);
}

/* Кликабельные строки таблицы */
.clickable-row {
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.clickable-row:hover {
    background-color: rgba(59, 130, 246, 0.08) !important;
}

/* ===== Карточки статистики ===== */
.stat-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}

/* ===== Badges (значки статусов) ===== */
.badge-soft-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.badge-soft-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}

.badge-soft-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

.badge-soft-info {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.badge-soft-secondary {
    background-color: rgba(107, 114, 128, 0.1);
    color: #6B7280;
}

/* ===== Иконки платформ ===== */
.platform-icon-youtube {
    color: #FF0000;
}

.platform-icon-instagram {
    color: #C13584;
}

.platform-icon-tiktok {
    color: #000000;
}

/* ===== Форматирование просмотров ===== */
.views-count {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

/* ===== Модальные окна ===== */
.modal-content {
    border: none;
    border-radius: 0.5rem;
}

.modal-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.modal-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* ===== Миниатюры видео ===== */
.video-thumbnail {
    width: 80px;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
}

.video-thumbnail-placeholder {
    width: 80px;
    height: 45px;
    background-color: #E5E7EB;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9CA3AF;
}

/* ===== Пустые состояния ===== */
.empty-state {
    padding: 3rem 1rem;
    text-align: center;
}

.empty-state-icon {
    font-size: 4rem;
    color: #D1D5DB;
    margin-bottom: 1rem;
}

.empty-state-title {
    color: #6B7280;
    font-weight: 500;
}

.empty-state-text {
    color: #9CA3AF;
}

/* ===== Timeline (для истории событий) ===== */
.timeline-item {
    position: relative;
    padding-left: 40px;
    padding-bottom: 1.5rem;
}

.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 30px;
    width: 2px;
    height: calc(100% - 10px);
    background-color: #E5E7EB;
}

.timeline-marker {
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
}

/* ===== Адаптивность ===== */
@media (max-width: 768px) {
    .stat-card {
        margin-bottom: 1rem;
    }
    
    .table-responsive {
        font-size: 0.875rem;
    }
}

/* ===== Анимации ===== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* ===== Страницы авторизации ===== */
.auth-form-container {
    max-width: 450px;
    margin: 0 auto;
}

.auth-card {
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.auth-logo {
    max-height: 60px;
    margin-bottom: 1.5rem;
}

/* ===== Формы ===== */
.form-control:focus {
    border-color: var(--adviral-accent);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

.input-group-text {
    background-color: #F9FAFB;
    border-color: #E5E7EB;
}

/* ===== Кнопки ===== */
.btn-adviral {
    background-color: var(--adviral-primary);
    border-color: var(--adviral-primary);
    color: white;
}

.btn-adviral:hover {
    background-color: var(--adviral-secondary);
    border-color: var(--adviral-secondary);
    color: white;
}

/* ============================================ */
/* ===== ЛОГОТИП ADVIRAL С ГРАДИЕНТОМ ===== */
/* ============================================ */

/* Логотип Adviral - переопределяем стили Volt */
.sidebar .adviral-logo,
.adviral-logo.nav-link {
    display: flex !important;
    align-items: center !important;
    font-size: 2rem !important;  /* Крупный логотип для sidebar */
    font-weight: 700 !important;
    text-decoration: none !important;
    letter-spacing: -0.5px !important;
    padding: 0.75rem 1rem !important;
    line-height: 1.2 !important;
}

.adviral-logo-text {
    color: #F5F8FB !important;  /* Светлый для sidebar */
    font-size: inherit !important;
}

.adviral-logo-viral {
    /* Градиент в цветах Volt: желто-оранжевый */
    background: linear-gradient(135deg, #F59E0B 0%, #F97316 50%, #EF4444 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 800 !important;
    font-size: inherit !important;
}

/* Логотип на светлом фоне */
.adviral-logo-dark .adviral-logo-text {
    color: #1F2937;
}

/* Большой логотип для страниц авторизации */
.adviral-logo-lg {
    font-size: 2.5rem;
}

.adviral-logo-lg .adviral-logo-viral {
    font-size: 2.5rem;
}

/* ============================================ */
/* ===== ИСПРАВЛЕНИЯ TOPBAR ===== */
/* ============================================ */

/* Иконки в topbar должны быть видны на светлом фоне */
.navbar-top .nav-link {
    color: #4B5563 !important;
}

.navbar-top .nav-link:hover {
    color: #1F2937 !important;
}

/* Колокольчик уведомлений */
.notification-bell {
    position: relative;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.15s ease;
}

.notification-bell:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Красная точка для непрочитанных */
.notification-bell.unread::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background-color: #EF4444;
    border-radius: 50%;
    border: 2px solid #fff;
}

/* SVG иконки в topbar */
.navbar-top .icon-sm {
    width: 1.25rem;
    height: 1.25rem;
}

/* ============================================ */
/* ===== ИСПРАВЛЕНИЯ ФУТЕРА ===== */
/* ============================================ */

/* Контент должен заполнять всю высоту */
main.content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Контент растягивается, футер внизу */
.flex-grow-1 {
    flex: 1 1 auto;
}

/* Стили футера */
main.content > footer {
    margin-top: auto;
    flex-shrink: 0;
}

/* Стилизация футера */
footer.bg-white {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;  /* Отступ снизу для красоты */
}

/* ============================================ */
/* ===== HORIZONTAL LAYOUT (горизонтальное меню) ===== */
/* ============================================ */

body.layout-horizontal {
    background-color: #E5E7EB;
}

body.layout-horizontal .site-container {
    max-width: 1450px;
    margin: 0 auto;
    min-height: 100vh;
    background-color: #F5F8FB;
    box-shadow: 
        -20px 0 40px rgba(0, 0, 0, 0.08),
        20px 0 40px rgba(0, 0, 0, 0.08);
    position: relative;
}

/* Тени по бокам */
body.layout-horizontal .site-container::before,
body.layout-horizontal .site-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
}

body.layout-horizontal .site-container::before {
    left: 0;
    transform: translateX(-100%);
    background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);
}

body.layout-horizontal .site-container::after {
    right: 0;
    transform: translateX(100%);
    background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
}

/* Основной контент */
body.layout-horizontal .main-content {
    min-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
}

body.layout-horizontal .content-area {
    flex: 1;
}

/* Navbar стили */
.navbar.bg-gray-800 {
    background-color: #1F2937 !important;
}

/* Мобильное меню - сохраняем тёмный фон */
@media (max-width: 991.98px) {
    .navbar.bg-gray-800 .navbar-collapse {
        background-color: #1F2937 !important;
        padding: 1rem !important;
        margin-top: 1rem !important;
        border-radius: 0.5rem !important;
    }
    
    .navbar.bg-gray-800 .navbar-collapse.show {
        background-color: #1F2937 !important;
    }
}

.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0 0.25rem;
    border-radius: 0.375rem;
    transition: all 0.15s ease;
    font-weight: 400 !important;
    text-decoration: underline;
}

/* Убираем подчеркивание у dropdown (аватарки) */
.navbar-dark .nav-link.dropdown-toggle {
    text-decoration: none;
}

.navbar-dark .nav-link:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-dark .nav-link.active {
    color: #fff !important;
    background-color: rgba(245, 158, 11, 0.2);
}

/* Логотип в navbar */
.adviral-logo-nav {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
}

.adviral-logo-nav .adviral-logo-text {
    color: #F5F8FB !important;
}

.adviral-logo-nav .adviral-logo-viral {
    background: linear-gradient(135deg, #F59E0B 0%, #F97316 50%, #EF4444 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 800 !important;
}

/* Avatar в navbar */
.avatar-nav {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2rem !important;
    color: white !important;
    border-radius: 50% !important;
    transition: all 0.3s ease;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Стили для иконок внутри аватарки (Font Awesome) */
.avatar-nav i {
    line-height: 1;
    display: inline-block;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Стили для SVG иконок внутри аватарки - надёжнее Font Awesome */
.avatar-nav svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: block;
}

/* Цветной фон для рекламодателя */
.avatar-nav.advertiser {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* Цветной фон для креатора */
.avatar-nav.creator {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
}

/* Ховер эффект - срабатывает при наведении на всю ссылку (аватарка + никнейм) */
.nav-link.dropdown-toggle:hover .avatar-nav {
    transform: scale(1.1);
}

/* Вертикальные разделители для меню рекламодателя */
.nav-item-divided:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 24px;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.nav-item-divided {
    position: relative;
    padding-right: 0.5rem;
}

.nav-item-divided .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
}

/* Уменьшенный отступ сверху для контентной области (хлебные крошки выше) */
.py-4 {
    padding-top: 1rem !important;
}

/* Dropdown меню */
.navbar .dropdown-menu {
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem;
}

/* Адаптивность */
@media (max-width: 991.98px) {
    body.layout-horizontal .site-container {
        max-width: 100%;
        box-shadow: none;
    }
    
    body.layout-horizontal .site-container::before,
    body.layout-horizontal .site-container::after {
        display: none;
    }
}

/* ============================================ */
/* ===== BOXED LAYOUT (sidebar, 1450px) ===== */
/* ============================================ */

/* Boxed layout - весь сайт в 1450px */
body.layout-boxed {
    background-color: #E5E7EB;
}

body.layout-boxed .site-wrapper {
    max-width: 1450px;
    margin: 0 auto;
    display: flex;
    min-height: 100vh;
    background-color: #F5F8FB;
    position: relative;
    box-shadow: 20px 0 40px rgba(0, 0, 0, 0.08);
}

/* Тень слева от sidebar на серый фон */
body.layout-boxed .site-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    transform: translateX(-100%);
    background: linear-gradient(to left, rgba(0, 0, 0, 0.12), transparent);
    pointer-events: none;
}

/* Sidebar в boxed layout - позиционирование относительное */
body.layout-boxed .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    flex-shrink: 0;
}

/* Контент в boxed layout */
body.layout-boxed main.content {
    flex: 1;
    margin-left: 0;
    max-width: calc(1450px - 260px); /* 1450 минус ширина sidebar */
}

/* Адаптивность для мобильных */
@media (max-width: 991.98px) {
    body.layout-boxed .site-wrapper {
        max-width: 100%;
        box-shadow: none;
    }
    
    body.layout-boxed .sidebar {
        position: fixed;
    }
    
    body.layout-boxed main.content {
        margin-left: 0;
        max-width: 100%;
    }
}

/* ============================================ */
/* ===== ОГРАНИЧЕНИЕ ШИРИНЫ КОНТЕНТА ===== */
/* ============================================ */

/* Класс для ограничения ширины контента */
.content-narrow {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Ещё более узкий вариант */
.content-compact {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* ============================================ */
/* ===== ИСПРАВЛЕНИЯ TOPBAR / АВАТАРКИ ===== */
/* ============================================ */

/* Аватарка пользователя в topbar */
.avatar-md {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-md .icon-sm {
    width: 1rem;
    height: 1rem;
    color: #6B7280;
}

/* Выравнивание элементов в topbar */
.navbar-top .nav-item {
    display: flex;
    align-items: center;
}

.navbar-top .dropdown-toggle {
    display: flex;
    align-items: center;
}

/* ============================================ */
/* ===== ВКЛАДКИ (TABS) - SEGMENT СТИЛЬ ===== */
/* ============================================ */

/* Сегментированные вкладки - современный стиль с подчёркиванием */
.nav-segment {
    display: inline-flex !important;
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    gap: 0 !important;
    border: none !important;
    border-bottom: 2px solid #E5E7EB !important;
}

.nav-segment .nav-item {
    margin: 0 !important;
}

.nav-segment .nav-link {
    color: #6B7280 !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    margin-bottom: -2px !important;
}

.nav-segment .nav-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background-color: transparent !important;
    transition: background-color 0.2s ease !important;
}

.nav-segment .nav-link:hover {
    color: #374151 !important;
}

/* АКТИВНАЯ ВКЛАДКА - с оранжевым подчёркиванием */
.nav-segment .nav-link.active,
.nav-segment .nav-link.active:hover,
.nav-segment .nav-link.active:focus {
    color: #1F2937 !important;
    background-color: transparent !important;
    font-weight: 600 !important;
}

.nav-segment .nav-link.active::after {
    background-color: #F59E0B !important;
}

.nav-segment .nav-link i {
    font-size: 0.875rem;
}

/* Badge внутри вкладок */
.nav-segment .badge {
    font-size: 0.75rem;
    padding: 0.2em 0.5em;
}

/* ============================================ */
/* ===== ЗАГОЛОВКИ ТАБЛИЦ - СЕРЫЙ ФОН ===== */
/* ============================================ */

/* Серый фон для заголовков таблиц */
.bg-light {
    background-color: #F5F8FB !important;
}

/* Дополнительная специфичность для thead */
thead.bg-light {
    background-color: #F5F8FB !important;
}

thead.bg-light th {
    background-color: #F5F8FB !important;
    color: #1F2937 !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 0.75rem 1rem !important;
}

/* ============================================ */
/* ===== МИНИАТЮРЫ ОФФЕРОВ ===== */
/* ============================================ */

/* Обёртка для миниатюры оффера */
.offer-thumbnail-wrapper {
    position: relative;
    display: inline-block;
}

/* Базовые стили миниатюры оффера */
.offer-thumbnail {
    position: relative;
    width: 80px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Маленький размер миниатюры (для таблиц в my_applications) */
.offer-thumbnail-small {
    width: 60px;
    height: 45px;
}

/* Большой размер миниатюры (для карточек в available_offers) */
.offer-thumbnail-large {
    width: 120px;
    height: 90px;
}

/* Эффект при наведении */
.offer-thumbnail:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Изображение миниатюры */
.offer-thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Логотип платформы поверх миниатюры */
.platform-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border-radius: 4px;
    padding: 3px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    font-size: 0.75rem;
}

/* Маленький логотип платформы */
.platform-badge-small {
    font-size: 0.65rem;
    padding: 2px 4px;
}

/* Fallback: когда нет миниатюры - показываем только иконку */
.platform-icon-fallback {
    width: 80px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
    border-radius: 8px;
    border: 2px dashed #E5E7EB;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .offer-thumbnail {
        width: 60px;
        height: 45px;
    }
    
    .offer-thumbnail-large {
        width: 100px;
        height: 75px;
    }
    
    .platform-badge {
        font-size: 0.65rem;
        padding: 2px 4px;
    }
}