/**
 * GTD Design System - Основные стили
 * Соответствует правилу П.4: БЭМ методология, CSS переменные, утилити-классы
 */

/* ===== ИМПОРТ ТОКЕНОВ TICKTICK ===== */
@import url('./ui/tokens.css');

/* ===== ИМПОРТ КОМПОНЕНТОВ ===== */
@import url('./components/buttons.css');
@import url('./components/forms.css');
@import url('./components/tags.css');
@import url('./components/modals.css');
@import url('./components/task-actions.css');
@import url('./components/assignment-fields.css');

/* ===== ИМПОРТ LAYOUT ===== */
@import url('./layout/header.css');
@import url('./layout/sidebar.css');

/* ===== ИМПОРТ СТРАНИЦ ===== */
@import url('./pages/calendar.css');
@import url('./pages/projects.css');
@import url('./pages/kanban.css');
@import url('./pages/teams.css');

/* ===== ИМПОРТ A11Y ===== */
@import url('./a11y/accessibility.css');

/* ===== ИМПОРТ ПРОИЗВОДИТЕЛЬНОСТИ ===== */
@import url('./performance/critical.css');
@import url('./performance/lazy.css');

/* ===== CSS ПЕРЕМЕННЫЕ (ТОКЕНЫ) ===== */
:root {
    /* Основная цветовая палитра GTD */
    --gtd-primary: #2563eb;
    --gtd-primary-dark: #1d4ed8;
    --gtd-primary-light: #3b82f6;
    --gtd-secondary: #64748b;
    --gtd-success: #059669;
    --gtd-warning: #d97706;
    --gtd-danger: #dc2626;
    --gtd-info: #0891b2;

    /* Нейтральные цвета */
    --gtd-gray-50: #f8fafc;
    --gtd-gray-100: #f1f5f9;
    --gtd-gray-200: #e2e8f0;
    --gtd-gray-300: #cbd5e1;
    --gtd-gray-400: #94a3b8;
    --gtd-gray-500: #64748b;
    --gtd-gray-600: #475569;
    --gtd-gray-700: #334155;
    --gtd-gray-800: #1e293b;
    --gtd-gray-900: #0f172a;

    /* Цвета приоритетов */
    --gtd-priority-1: #6b7280;
    --gtd-priority-2: #0ea5e9;
    --gtd-priority-3: #10b981;
    --gtd-priority-4: #f59e0b;
    --gtd-priority-5: #ef4444;

    /* Цвета статусов */
    --gtd-status-inbox: #6b7280;
    --gtd-status-next: #2563eb;
    --gtd-status-waiting: #f59e0b;
    --gtd-status-someday: #8b5cf6;
    --gtd-status-done: #059669;

    /* Тени и эффекты */
    --gtd-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --gtd-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --gtd-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --gtd-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Скругления */
    --gtd-radius-sm: 0.375rem;
    --gtd-radius: 0.5rem;
    --gtd-radius-md: 0.75rem;
    --gtd-radius-lg: 1rem;

    /* Переходы */
    --gtd-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --gtd-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-индексы */
    --gtd-z-dropdown: 1000;
    --gtd-z-modal: 1050;
    --gtd-z-notification: 1100;
    --gtd-z-tooltip: 1150;

    /* Кнопки действий с задачами */
    --gtd-task-action-btn-size: 28px;
    --gtd-task-action-btn-bg: transparent;
    --gtd-task-action-btn-border: var(--tt-border);
    --gtd-task-action-btn-color: var(--tt-text-secondary);
    --gtd-task-action-btn-radius: var(--tt-radius-sm);
    --gtd-task-action-btn-hover-bg: var(--tt-surface-alt);
    --gtd-task-action-btn-hover-border: var(--tt-border-subtle);
    --gtd-task-action-btn-hover-color: var(--tt-text-primary);
    --gtd-task-action-btn-danger-hover-bg: var(--tt-accent-danger);
    --gtd-task-action-btn-danger-hover-border: var(--tt-accent-danger);
    --gtd-task-action-btn-danger-hover-color: var(--tt-text-on-accent);
}

/* ===== БАЗОВЫЕ СТИЛИ ===== */
body {
    font-family: var(--tt-font-primary);
    line-height: var(--tt-leading-normal);
    color: var(--tt-text-primary);
    background-color: var(--tt-bg);
}

/* ===== ТИПОГРАФИКА ===== */
.gtd-heading {
    font-weight: var(--tt-weight-semibold);
    line-height: var(--tt-leading-tight);
    color: var(--tt-text-primary);
}

.gtd-heading--h1 { font-size: var(--tt-text-h1); }
.gtd-heading--h2 { font-size: var(--tt-text-h2); }
.gtd-heading--h3 { font-size: var(--tt-text-h3); }
.gtd-heading--h4 { font-size: var(--tt-text-xl); }
.gtd-heading--h5 { font-size: var(--tt-text-lg); }
.gtd-heading--h6 { font-size: var(--tt-text-base); }

.gtd-text {
    color: var(--tt-text-primary);
    line-height: var(--tt-leading-normal);
}

.gtd-text--muted {
    color: var(--tt-text-muted);
}

.gtd-text--gradient {
    background: linear-gradient(135deg, var(--gtd-primary) 0%, var(--gtd-primary-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== НАВИГАЦИЯ (БЭМ) ===== */
.gtd-navbar {
    background: linear-gradient(135deg, var(--gtd-primary) 0%, var(--gtd-primary-dark) 100%);
    box-shadow: var(--gtd-shadow-md);
    border: none;
}

.gtd-navbar__brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: white;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.gtd-navbar__nav {
    margin-left: auto;
}

.gtd-navbar__item {
    margin-right: 0.5rem;
}

.gtd-navbar__link {
    color: rgba(255,255,255,0.9);
    font-weight: 500;
    padding: 0.75rem 1rem;
    border-radius: var(--gtd-radius);
    transition: var(--gtd-transition);
    position: relative;
    text-decoration: none;
}

.gtd-navbar__link:hover {
    color: white;
    background-color: rgba(255,255,255,0.1);
    transform: translateY(-1px);
    text-decoration: none;
}

.gtd-navbar__link--active {
    color: white;
    background-color: rgba(255,255,255,0.2);
    font-weight: 600;
}

.gtd-navbar__link--active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background-color: white;
    border-radius: 2px;
}

/* ===== КАРТОЧКИ (БЭМ) ===== */
.gtd-card {
    border: none;
    border-radius: var(--gtd-radius-md);
    box-shadow: var(--gtd-shadow);
    transition: var(--gtd-transition);
    background: white;
}

.gtd-card:hover {
    box-shadow: var(--gtd-shadow-lg);
    transform: translateY(-2px);
}

.gtd-card__header {
    border-bottom: 1px solid var(--gtd-gray-200);
    background: linear-gradient(135deg, var(--gtd-gray-50) 0%, white 100%);
    font-weight: 600;
    padding: 1rem 1.5rem;
}

.gtd-card__body {
    padding: 1.5rem;
}

.gtd-card__footer {
    border-top: 1px solid var(--gtd-gray-200);
    padding: 1rem 1.5rem;
    background-color: var(--gtd-gray-50);
}

/* ===== КНОПКИ (БЭМ) ===== */
.gtd-btn {
    border-radius: var(--gtd-radius);
    font-weight: 500;
    transition: var(--gtd-transition);
    border: none;
    padding: 0.625rem 1.25rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.gtd-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--gtd-shadow-md);
    text-decoration: none;
}

.gtd-btn--primary {
    background: linear-gradient(135deg, var(--gtd-primary) 0%, var(--gtd-primary-dark) 100%);
    color: white;
}

.gtd-btn--primary:hover {
    background: linear-gradient(135deg, var(--gtd-primary-dark) 0%, var(--gtd-primary) 100%);
}

.gtd-btn--outline-primary {
    border: 2px solid var(--gtd-primary);
    color: var(--gtd-primary);
    background: transparent;
}

.gtd-btn--outline-primary:hover {
    background: var(--gtd-primary);
    color: white;
}

.gtd-btn--secondary {
    background: var(--gtd-secondary);
    color: white;
}

.gtd-btn--success {
    background: var(--gtd-success);
    color: white;
}

.gtd-btn--warning {
    background: var(--gtd-warning);
    color: white;
}

.gtd-btn--danger {
    background: var(--gtd-danger);
    color: white;
}

.gtd-btn--sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.gtd-btn--lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
}

/* ===== ФОРМЫ (БЭМ) ===== */
.gtd-form__group {
    margin-bottom: 1rem;
}

.gtd-form__label {
    font-weight: 600;
    color: var(--gtd-gray-700);
    margin-bottom: 0.5rem;
    display: block;
}

.gtd-form__control {
    border: 2px solid var(--gtd-gray-200);
    border-radius: var(--gtd-radius);
    padding: 0.75rem 1rem;
    transition: var(--gtd-transition);
    background-color: white;
    width: 100%;
}

.gtd-form__control:focus {
    border-color: var(--gtd-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
}

.gtd-form__control--error {
    border-color: var(--gtd-danger);
}

.gtd-form__error {
    color: var(--gtd-danger);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* ===== СТАТУСЫ ЗАДАЧ (БЭМ) ===== */
.gtd-task-status {
    padding: 0.25rem 0.75rem;
    border-radius: var(--gtd-radius);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
}

.gtd-task-status--inbox {
    background: linear-gradient(135deg, var(--gtd-status-inbox) 0%, #9ca3af 100%);
}

.gtd-task-status--next {
    background: linear-gradient(135deg, var(--gtd-status-next) 0%, var(--gtd-primary-light) 100%);
}

.gtd-task-status--waiting {
    background: linear-gradient(135deg, var(--gtd-status-waiting) 0%, #fbbf24 100%);
}

.gtd-task-status--someday {
    background: linear-gradient(135deg, var(--gtd-status-someday) 0%, #a78bfa 100%);
}

.gtd-task-status--done {
    background: linear-gradient(135deg, var(--gtd-status-done) 0%, #34d399 100%);
}

/* ===== ПРИОРИТЕТЫ ЗАДАЧ (БЭМ) ===== */
.gtd-task-priority {
    border-left: 4px solid;
}

.gtd-task-priority--1 { border-left-color: var(--gtd-priority-1); }
.gtd-task-priority--2 { border-left-color: var(--gtd-priority-2); }
.gtd-task-priority--3 { border-left-color: var(--gtd-priority-3); }
.gtd-task-priority--4 { border-left-color: var(--gtd-priority-4); }
.gtd-task-priority--5 { border-left-color: var(--gtd-priority-5); }

/* ===== КАЛЕНДАРЬ (БЭМ) ===== */
.gtd-calendar__event {
    cursor: pointer;
    border-radius: var(--gtd-radius);
    padding: 4px 8px;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    box-shadow: var(--gtd-shadow-sm);
    transition: var(--gtd-transition-fast);
}

.gtd-calendar__event:hover {
    transform: scale(1.02);
    box-shadow: var(--gtd-shadow-md);
}

/* Стили для контейнера календаря */
#calendar {
    min-height: 600px;
    height: 600px;
    width: 100%;
    background: white;
    border-radius: var(--gtd-radius-md);
    padding: 1rem;
    box-shadow: var(--gtd-shadow);
    position: relative;
    overflow: hidden;
}

/* Стили для FullCalendar */
.fc {
    font-family: inherit;
    height: 100% !important;
    width: 100% !important;
}

.fc-view-harness {
    height: calc(100% - 120px) !important;
}

.fc-header-toolbar {
    margin-bottom: 1rem;
    padding: 0.5rem 0;
}

.fc-button {
    background: var(--gtd-primary);
    border-color: var(--gtd-primary);
    border-radius: var(--gtd-radius);
}

.fc-button:hover {
    background: var(--gtd-primary-dark);
    border-color: var(--gtd-primary-dark);
}

.fc-button:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.fc-daygrid-day {
    min-height: 80px;
}

.fc-daygrid-day-number {
    font-weight: 500;
    color: var(--gtd-gray-700);
}

.fc-day-today {
    background-color: rgba(37, 99, 235, 0.1) !important;
}

/* Дополнительные стили для корректного отображения */
.fc-daygrid-body {
    width: 100% !important;
}

.fc-daygrid-day-frame {
    min-height: 80px;
}

.fc-col-header {
    background-color: var(--gtd-gray-50);
}

.fc-col-header-cell {
    padding: 0.5rem;
    font-weight: 600;
    color: var(--gtd-gray-700);
}

/* ===== МОДАЛЬНЫЕ ОКНА (БЭМ) ===== */
.gtd-modal__content {
    border: none;
    border-radius: var(--gtd-radius-lg);
    box-shadow: var(--gtd-shadow-lg);
}

.gtd-modal__header {
    border-bottom: 1px solid var(--gtd-gray-200);
    background: linear-gradient(135deg, var(--gtd-gray-50) 0%, white 100%);
}

.gtd-modal__title {
    font-weight: 600;
    color: var(--gtd-gray-900);
}

/* ===== УВЕДОМЛЕНИЯ (БЭМ) ===== */
.gtd-notification-container, .notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: var(--gtd-z-notification);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gtd-notification, .notification {
    background: white;
    border-radius: var(--gtd-radius);
    box-shadow: var(--gtd-shadow-lg);
    padding: 1rem;
    min-width: 300px;
    transform: translateX(100%);
    opacity: 0;
    transition: var(--gtd-transition);
}

.gtd-notification--visible, .notification--visible {
    transform: translateX(0);
    opacity: 1;
}

.gtd-notification--hiding, .notification--hiding {
    transform: translateX(100%);
    opacity: 0;
}

.gtd-notification__content, .notification__content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.gtd-notification__icon, .notification__icon {
    flex-shrink: 0;
    font-size: 1.25rem;
}

.gtd-notification__message, .notification__message {
    flex-grow: 1;
    margin: 0;
}

.gtd-notification__close, .notification__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--gtd-radius-sm);
    color: var(--gtd-gray-500);
    transition: var(--gtd-transition-fast);
}

.gtd-notification__close:hover, .notification__close:hover {
    background-color: var(--gtd-gray-100);
    color: var(--gtd-gray-700);
}

.gtd-notification--success .gtd-notification__icon, .notification--success .notification__icon { color: var(--gtd-success); }
.gtd-notification--error .gtd-notification__icon, .notification--error .notification__icon { color: var(--gtd-danger); }
.gtd-notification--warning .gtd-notification__icon, .notification--warning .notification__icon { color: var(--gtd-warning); }
.gtd-notification--info .gtd-notification__icon, .notification--info .notification__icon { color: var(--gtd-info); }

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 768px) {
    .gtd-navbar__brand {
        font-size: 1.25rem;
    }

    .gtd-card {
        margin-bottom: 1rem;
    }

    .gtd-btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .gtd-heading--h1, .gtd-heading--h2, .gtd-heading--h3 {
        font-size: 1.5rem;
    }

    #calendar {
        min-height: 400px;
        height: 400px;
        padding: 0.5rem;
    }

    .fc-header-toolbar {
        flex-direction: column;
        gap: 0.5rem;
    }

    .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .gtd-navbar__brand {
        font-size: 1.1rem;
    }

    .gtd-card__body {
        padding: 1rem;
    }

    .gtd-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* ===== СВЕТЛАЯ ТЕМА (ФИКСИРОВАННАЯ) ===== */
/* Тёмная тема отключена для лучшей читаемости */

/* ===== АНИМАЦИИ ===== */
@keyframes gtd-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gtd-fade-in-up {
    animation: gtd-fadeInUp 0.5s ease-out;
}

@keyframes gtd-slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.gtd-slide-in-right {
    animation: gtd-slideInRight 0.3s ease-out;
}

/* ===== УТИЛИТИ-КЛАССЫ ===== */
.gtd-text-center { text-align: center; }
.gtd-text-left { text-align: left; }
.gtd-text-right { text-align: right; }

.gtd-d-flex { display: flex; }
.gtd-d-block { display: block; }
.gtd-d-none { display: none; }

.gtd-justify-content-between { justify-content: space-between; }
.gtd-justify-content-center { justify-content: center; }
.gtd-align-items-center { align-items: center; }

.gtd-mb-0 { margin-bottom: 0; }
.gtd-mb-1 { margin-bottom: 0.25rem; }
.gtd-mb-2 { margin-bottom: 0.5rem; }
.gtd-mb-3 { margin-bottom: 1rem; }
.gtd-mb-4 { margin-bottom: 1.5rem; }

.gtd-p-0 { padding: 0; }
.gtd-p-1 { padding: 0.25rem; }
.gtd-p-2 { padding: 0.5rem; }
.gtd-p-3 { padding: 1rem; }
.gtd-p-4 { padding: 1.5rem; }