/* ============================================
   Page Header Card - Универсальный компонент
   ============================================ */

/* Основная карточка заголовка */
.page-header-card {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Разносит контент по краям */
    flex-wrap: wrap; /* Перенос на мобильных */
    gap: 16px;
    padding: 20px 24px;
    border-radius: 12px;
    margin-bottom: 24px;
    width: 100%;
    
    /* Светлая тема */
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

/* Блок с иконкой */
.header-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    flex-shrink: 0;
    
    /* Светлая тема - синий акцент */
    background-color: #dbeafe;
    color: #2563eb;
}

.header-icon-box svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

/* Группировка иконки и текста */
.header-icon-box + .header-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

/* Текстовая часть */
.header-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.header-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
}

.header-subtitle {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    font-weight: 400;
    line-height: 1.4;
}

/* Опциональная кнопка справа */
.header-action {
    flex-shrink: 0;
}

/* ============================================
   Темная тема
   ============================================ */

/* Tailwind dark mode */
.dark .page-header-card {
    background-color: #1e293b;
    border: 1px solid #334155;
    box-shadow: none;
}

.dark .header-title {
    color: #f8fafc;
}

.dark .header-subtitle {
    color: #94a3b8;
}

.dark .header-icon-box {
    background-color: #334155;
    color: #60a5fa;
}

/* Альтернативный селектор для темной темы */
[data-theme="dark"] .page-header-card {
    background-color: #1e293b;
    border: 1px solid #334155;
    box-shadow: none;
}

[data-theme="dark"] .header-title {
    color: #f8fafc;
}

[data-theme="dark"] .header-subtitle {
    color: #94a3b8;
}

[data-theme="dark"] .header-icon-box {
    background-color: #334155;
    color: #60a5fa;
}

/* ============================================
   Цветовые варианты иконок
   ============================================ */

/* Зеленый (для верификации, успеха) */
.header-icon-box.icon-green {
    background-color: #dcfce7;
    color: #16a34a;
}

.dark .header-icon-box.icon-green,
[data-theme="dark"] .header-icon-box.icon-green {
    background-color: #14532d;
    color: #4ade80;
}

/* Фиолетовый (для профиля, настроек) */
.header-icon-box.icon-purple {
    background-color: #f3e8ff;
    color: #9333ea;
}

.dark .header-icon-box.icon-purple,
[data-theme="dark"] .header-icon-box.icon-purple {
    background-color: #581c87;
    color: #c084fc;
}

/* Оранжевый (для уведомлений) */
.header-icon-box.icon-orange {
    background-color: #ffedd5;
    color: #ea580c;
}

.dark .header-icon-box.icon-orange,
[data-theme="dark"] .header-icon-box.icon-orange {
    background-color: #7c2d12;
    color: #fb923c;
}

/* Циан (для мессенджера, коммуникаций) */
.header-icon-box.icon-cyan {
    background-color: #cffafe;
    color: #0891b2;
}

.dark .header-icon-box.icon-cyan,
[data-theme="dark"] .header-icon-box.icon-cyan {
    background-color: #164e63;
    color: #22d3ee;
}

/* Индиго (для дел, документов) */
.header-icon-box.icon-indigo {
    background-color: #e0e7ff;
    color: #4f46e5;
}

.dark .header-icon-box.icon-indigo,
[data-theme="dark"] .header-icon-box.icon-indigo {
    background-color: #312e81;
    color: #818cf8;
}

/* Красный (для безопасности, критичных действий) */
.header-icon-box.icon-red {
    background-color: #fee2e2;
    color: #dc2626;
}

.dark .header-icon-box.icon-red,
[data-theme="dark"] .header-icon-box.icon-red {
    background-color: #7f1d1d;
    color: #f87171;
}

/* ============================================
   Адаптивность
   ============================================ */

/* Планшеты и меньше */
@media (max-width: 768px) {
    .page-header-card {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .header-action {
        width: 100%;
    }
    
    .header-action a {
        width: 100%;
        justify-content: center;
    }
}

/* Мобильные устройства */
@media (max-width: 640px) {
    .page-header-card {
        padding: 16px 20px;
        gap: 12px;
    }
    
    .header-icon-box {
        width: 40px;
        height: 40px;
    }
    
    .header-icon-box svg {
        width: 20px;
        height: 20px;
    }
    
    .header-title {
        font-size: 18px;
    }
    
    .header-subtitle {
        font-size: 12px;
    }
}