/*
 * Цветовая Схема: Сдержанный Киберпанк
 * Фон: Темный (Dark Mode)
 * Акцентный текст/заголовки: Светлый Бирюзовый (#00fff6) - Неон
 * Кнопки: Глубокий Графитовый Синий (#1c2a3d)
 */


:root {
     /* Primary Colors */
    --primary-text-color: #f1f1f1;
    --background-dark: #121212;
    --surface-dark: #1f1f1f;
    --highlight-text: #00ff37;
    --highlight-hover-text: #0091ff;
    --highlight-card-title: #00e5ff;

    /* Danger Colors */
    --highlight-danger-text: #ff0055;
    --highlight-danger-hover-text: #ff0000;
    --shadow-danger-color: rgba(255, 0, 43, 0.4);
    --neon-danger-color: rgba(255, 0, 60, 0.8);

    /* Warning Colors */
    --highlight-warning-text: #ffbb00;
    --highlight-warning-hover-text: #ff9100;
    --shadow-warning-color: rgba(255, 242, 0, 0.4);
    --neon-warning-color: rgba(255, 238, 0, 0.8);

    --primary-button-color: #202227;
    --primary-button-hover: #202227;

    --shadow-color: rgb(0, 140, 255);
    --neon-color: rgba(81, 255, 0, 0.8);
}

a{
    text-decoration: none;
}

/* 2. Базовые Стили */
body {
    background-color: var(--background-dark);
    color: var(--primary-text-color);
    font-family: 'Inter', sans-serif;
}

.text-danger{
    color: var(--highlight-danger-text)!important;
}

.text-primary{
    color: var(--highlight-text)!important;
}

/* 3. Навигационная Панель */
.navbar {
    background-color: var(--surface-dark);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid #2c2c2c;
}
.navbar-brand, .nav-link {
    color: var(--primary-text-color) !important;
}
.nav-link {
    font-weight: 500;
    transition: color 0.2s ease, transform 0.2s ease;
}
.nav-link:hover {
    color: var(--highlight-text) !important;
    text-shadow: 0 0 8px var(--neon-color);
}

/* 4. Общие Ссылки */
.custom-link{
    color: var(--primary-text-color) !important;
    transition: color 0.3s;
}
.custom-link:hover{
    color: var(--highlight-text) !important;
    text-shadow: 0 0 5px var(--neon-color);
}

/* 5. Блок "Hero" и Заголовки */
.hero {
    padding: 3rem 3rem;
    background: linear-gradient(135deg, #1f1f1f 0%, #2c2c2c 100%);
    border-radius: 14px; 
    margin-top: 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
h2 {
    color: var(--highlight-text);
    text-shadow: 0 0 10px var(--neon-color);
}
.hero h1 {
    font-weight: 700;
    font-size: 3rem;
    color: var(--highlight-text);
    text-shadow: 0 0 12px var(--neon-color);
}
.hero p {
    font-size: 1rem;
    margin-top: 1rem;
    color: #cccccc;
}

/* Buttons */
.btn-primary {
    background-color: var(--primary-button-color);
    color: var(--highlight-text);

    border: 1px solid var(--highlight-text);

    transition: 0.5s ease-in-out;
    padding: 0.55rem 1.3rem;
    font-weight: 500;
    border-radius: 10px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}
.btn-primary:hover {
    background-color: var(--primary-button-hover);
    border: 1px solid var(--highlight-hover-text);
    box-shadow: 0 0 10px var(--shadow-color), 0 0 5px var(--shadow-color) inset;
    color: white;
}

.btn-danger {
    background-color: var(--primary-button-color);
    color: var(--highlight-danger-text);

    border: 1px solid var(--highlight-danger-text);

    transition: 0.5s ease-in-out;
    padding: 0.55rem 1.3rem;
    font-weight: 500;
    border-radius: 10px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}
.btn-danger:hover {
    background-color: var(--primary-button-hover);
    border: 1px solid var(--highlight-danger-hover-text);
    box-shadow: 0 0 10px var(--shadow-danger-color), 0 0 5px var(--shadow-danger-color) inset;
    color: white;
}

.btn-warning {
    background-color: var(--primary-button-color);
    color: var(--highlight-warning-text);

    border: 1px solid var(--highlight-warning-text);

    transition: 0.5s ease-in-out;
    padding: 0.55rem 1.3rem;
    font-weight: 500;
    border-radius: 10px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}
.btn-warning:hover {
    background-color: var(--primary-button-hover);
    border: 1px solid var(--highlight-warning-hover-text);
    box-shadow: 0 0 10px var(--shadow-warning-color), 0 0 5px var(--shadow-warning-color) inset;
    color: white;
}

.text-muted{
    color: lightgray!important;
}

/* 7. Карточки */
.card {
    color: var(--primary-text-color) !important;
    background-color: var(--surface-dark);
    /* Тонкая рамка в цвет акцента */
    border: 1px solid rgba(0, 255, 246, 0.2);
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.7);
    transition: box-shadow 0.3s, border-color 0.3s;
}
.card:hover {
    /* Легкое свечение карточки */
    box-shadow: 0 15px 40px rgba(0,0,0,0.9), 0 0 20px var(--shadow-color);
    border-color: var(--highlight-hover-text);
    transition: 0.5s;

    .card-title {
        color: var(--highlight-card-title);
        transition: 0.5s;
    }
}

.card-title {
    color: var(--highlight-text);
}

.card-title:hover {
    color: var(--highlight-hover-text);
}

/* 8. Футер */
footer {
    padding: 2rem 0;
    text-align: center;
    color: #888;
    margin-top: 4rem;
    border-top: 1px solid #2c2c2c;
}

/* 9. Хлебные крошки */
.breadcrumb-item a {
    color: var(--highlight-text);
    text-decoration: none;
    transition: color 0.3s;
}
.breadcrumb-item a:hover {
    color: var(--primary-text-color); /* При наведении - сбрасываем неоновый цвет */
    text-shadow: none;
}
.breadcrumb-item.active {
    color: var(--primary-text-color);
}
.breadcrumb-item + .breadcrumb-item::before {
    color: #888;
}
@media (max-width: 640px) {
    .breadcrumb {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0.5rem 0;
    }
    .breadcrumb-item {
        display: block;
        line-height: 1.4;
    }
    .breadcrumb-item + .breadcrumb-item::before {
        display: none;
    }
}

/* 11. Стили для лоадера */
.button-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}

.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.starIcon-active{
    fill: #ffbb00!important;
}

.starIcon-disable,
.starIcon-disabled{
    fill: #818181!important;
}

.starIcon:hover{
    fill: #ffbb00!important;
    cursor: pointer;
    transition: 0.7s;
}

.checkIcon-active{
    fill: #00ff37!important;
    cursor: pointer;
}

.checkIcon-active:hover{
    fill: #00ff37!important;
    cursor: pointer;
    transition: 0.7s;
}

.checkIcon-disable,
.checkIcon-disabled{
    fill: #818181!important;
    cursor: pointer;
}

.checkIcon-disable:hover,
.checkIcon-disabled:hover{
    fill: #ffffff!important;
    cursor: pointer;
    transition: 0.7s;
}

/* Стили для значков (роли) */
.badge-admin {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 9999px;
    
    color: var(--highlight-danger-text);
    background-color: rgba(255, 0, 85, 0.15); /* Фон на основе Danger */
    border: 1px solid var(--highlight-danger-text);
    text-shadow: 0 0 5px var(--neon-danger-color);
}
.badge-user {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 9999px;

    color: var(--highlight-text);
    background-color: rgba(0, 255, 246, 0.15); /* Фон на основе Highlight */
    border: 1px solid var(--highlight-text);
    text-shadow: 0 0 5px var(--neon-color);
}

/* ========================================================================== */
/* СТИЛИ ДЛЯ DATEPICKER - КИБЕРПАНК СТИЛЬ (NEON DARK MODE)          */
/* ========================================================================== */

/* 1. Основной контейнер календаря */
.datepicker {
    /* Используем Surface Dark для фона, Border - темнее */
    background-color: var(--surface-dark) !important;
    border: 1px solid rgba(0, 255, 55, 0.2) !important; /* Тонкая рамка с неоновым оттенком */
    color: black !important;
    border-radius: 8px !important;
    /* Тень, как у карточек, для глубины */
    box-shadow: 0 5px 15px rgba(0,0,0,0.7), 0 0 10px rgba(0, 255, 55, 0.15) !important; 
}

.datepicker-picker{
    background-color: var(--surface-dark)!important;
}

.datepicker-picker .datepicker-controls .btn {
    color: var(--highlight-text)!important;
    background-color: var(--surface-dark)!important;
}

/* 2. Заголовок (Месяц и Год) */
.datepicker-picker .datepicker-title .days-of-week {
    color: var(--highlight-text) !important; /* Неоновый заголовок */
    text-shadow: 0 0 5px var(--neon-color);
}

/* 3. Кнопки навигации (стрелки) и контролы */
.datepicker-picker .datepicker-controls .button {
    background-color: transparent !important;
    color: var(--primary-text-color) !important;
    transition: 0.3s;
}

.datepicker-picker .datepicker-controls .button:hover {
    background-color: #2c2c2c !important; /* Слегка темнее, чем фон */
    color: var(--highlight-text) !important;
    text-shadow: 0 0 5px var(--neon-color);
    border-radius: 4px;
}

/* 4. Сетка и Дни недели (Dow) */
.datepicker-grid {
    background-color: var(--surface-dark) !important;
}

.datepicker-picker .datepicker-grid .dow {
    color: var(--highlight-text) !important; /* Неоновый цвет для заголовков дней недели */
    opacity: 0.7;
}

/* 5. Ячейки (Дни) */
.datepicker-cell {
    color: var(-highlight-text) !important;
    border-radius: 4px !important;
    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

/* Ячейки других месяцев */
.datepicker-cell.out,
.datepicker-cell.disabled {
    color: #555555 !important; /* Очень темный, чтобы не отвлекал */
}

/* При наведении на ячейку */
.datepicker-cell:not(.selected):hover {
    background-color: var(-highlight-text) !important; 
    color: var(-highlight-text) !important; /* Голубой при наведении */
    box-shadow: 0 0 4px rgba(0, 255, 42, 0.5); /* Легкое голубое свечение */
}

/* Активный/выбранный день (КИБЕРПАНК АКЦЕНТ) */
.datepicker-cell.selected,
.datepicker-cell.selected:hover {
    background-color: var(--highlight-text) !important; /* Яркий Неоновый зеленый */
    color: var(--background-dark) !important; /* Тёмный текст на ярком фоне */
    font-weight: 700 !important;
    box-shadow: 0 0 10px var(--neon-color) !important; /* Мощное неоновое свечение */
}

/* Сегодняшний день (Today) */
.datepicker-cell.today {
    border: 1px solid var(--highlight-text) !important; /* Неоновая граница */
    background-color: rgba(0, 255, 55, 0.1) !important; /* Легкое неоновое заполнение */
}

/* Сегодняшний день, если он выбран */
.datepicker-cell.today.selected {
    background-color: var(--highlight-text) !important;
    color: var(--background-dark) !important;
    border-color: var(--highlight-text) !important;
}

/* 6. Нижняя панель с кнопками Today/Clear */
.datepicker-picker .datepicker-footer {
    background-color: var(--surface-dark) !important;
    border-top: 1px solid rgba(0, 255, 55, 0.2) !important; 
    padding: 8px 10px;
}

/* 7. Кнопки Today и Clear */
.datepicker-picker .datepicker-footer .button {
    background-color: var(--primary-button-color) !important;
    color: var(--highlight-text) !important;
    border: 1px solid var(--highlight-text) !important;
    transition: 0.3s;
}

.datepicker-picker .datepicker-footer .button:hover {
    background-color: var(--primary-button-hover) !important;
    border: 1px solid var(--highlight-text) !important;
    color: white !important;
    box-shadow: 0 0 8px var(--shadow-color) !important; /* Свечение при наведении */
}

/* 8. Поле ввода и иконка */
/* Если вы используете Bootstrap `form-control`, нужно его переопределить */
.form-control#subscriptionDateInput {
    background-color: #1a1a1a !important; /* Темнее, чем Surface Dark */
    color: var(--highlight-text) !important;
    border: 1px solid #333333 !important;
}

/* 9. Кнопка с иконкой календаря (Input Group Text) */
.input-group-text.datepicker-icon-btn {
    background-color: #2c2c2c !important; /* Цвет как у кнопок */
    color: var(--highlight-text) !important; /* Неоновая иконка */
    border: 1px solid #333333 !important;
    border-left: none !important;
}

/* Убедитесь, что значок календаря тоже неоновый */
.input-group-text.datepicker-icon-btn i {
    color: var(--highlight-text) !important;
    text-shadow: 0 0 3px var(--neon-color);
}