/* ===== UI COMPONENTS - HEADER ===== */

/* Shared transparent header variables (used across all headers) */
:root {
  /* Dark glass palette, aligned with context-menu look */
  --header-glass-bg: rgba(12, 14, 26, 0.88);
  --header-glass-border: rgba(79, 195, 247, 0.22);
  --header-glass-blur: 20px;
  --header-glass-gradient: rgba(79, 195, 247, 0.28);
  --header-text-primary: rgba(255, 255, 255, 0.95);
    --header-icon-color: var(--text-cyan, #4fc3f7);
  --header-icon-shadow: rgba(79, 195, 247, 0.30);
}

/* ===== UNIVERSAL MODAL HEADER ===== */
/* 
 * Stilul universal pentru header-urile din toate modalele
 * Folosit în: calendar-modal, task-manager-modal, event-modal, etc.
 */

.modal-header {
    background: var(--header-bg, var(--header-glass-bg)) !important;
    border-bottom: 1px solid var(--header-border, var(--header-glass-border)) !important;
    padding: 24px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    backdrop-filter: blur(var(--header-glass-blur));
    -webkit-backdrop-filter: blur(var(--header-glass-blur));
    border-radius: 20px 20px 0 0;
}

/* Specificitate mai mare pentru tema producători */
body.theme-producatori .modal-header,
body.theme-content-creator .modal-header {
    background: var(--header-bg, rgba(255, 255, 255, 0.1)) !important;
}

/* Specificitate mai mare pentru tema programatori */
body.theme-programatori .modal-header {
    background: var(--header-bg, var(--header-glass-bg)) !important;
}

/* Adaptează text-secondary pentru tema producători */
body.theme-producatori .modal-header h1,
body.theme-producatori .modal-header h2,
body.theme-producatori .modal-header h3,
body.theme-content-creator .modal-header h1,
body.theme-content-creator .modal-header h2,
body.theme-content-creator .modal-header h3 {
    color: var(--header-text-primary, var(--text-primary, #F1F1F1)) !important;
}

/* Adaptează text-secondary pentru tema programatori */
body.theme-programatori .modal-header h1,
body.theme-programatori .modal-header h2,
body.theme-programatori .modal-header h3 {
    color: var(--header-text-primary, var(--text-primary, #ffffff)) !important;
}

/* Header gradient overlay for enhanced visual appeal */
.modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--header-gradient-color, var(--header-glass-gradient)), transparent) !important;
}

/* Header title styling */
.modal-header h1,
.modal-header h2,
.modal-header h3 {
    margin: 0;
    color: var(--header-text-primary, rgba(255, 255, 255, 0.95)) !important;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.01em;
}

.modal-header h1 i,
.modal-header h2 i,
.modal-header h3 i {
    color: var(--header-icon-color) !important;
    font-size: 22px;
    opacity: 0.9;
}

/* Header actions container */
.modal-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Responsive design for modal header */
@media (max-width: 768px) {
    .modal-header {
        padding: 16px 20px;
    }
    
    .modal-header h1,
    .modal-header h2,
    .modal-header h3 {
        font-size: 16px;
    }
    
    .modal-header h1 i,
    .modal-header h2 i,
    .modal-header h3 i {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .modal-header {
        padding: 14px 16px;
    }
    
    .modal-header h1,
    .modal-header h2,
    .modal-header h3 {
        font-size: 15px;
    }
    
    .modal-header h1 i,
    .modal-header h2 i,
    .modal-header h3 i {
        font-size: 16px;
    }
    
    .modal-header-actions {
        gap: 6px;
    }
}

/* ===== CALENDAR SPECIFIC HEADER ===== */
/* 
 * Header specific pentru calendar care extinde stilul universal
 */

.calendar-header-bar {
    background: var(--calendar-header-bg, var(--header-glass-bg)) !important;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    backdrop-filter: blur(var(--header-glass-blur));
    -webkit-backdrop-filter: blur(var(--header-glass-blur));
    border-radius: 20px 20px 0 0;
}

/* Specificitate mai mare pentru tema producători */
body.theme-producatori .calendar-header-bar,
body.theme-content-creator .calendar-header-bar {
    background: var(--calendar-header-bg, rgba(255, 255, 255, 0.1)) !important;
}

/* Specificitate mai mare pentru tema programatori */
body.theme-programatori .calendar-header-bar {
    background: var(--calendar-header-bg, var(--header-glass-bg)) !important;
}

/* Adaptează text-secondary pentru tema producători */
body.theme-producatori .calendar-header-bar h1,
body.theme-content-creator .calendar-header-bar h1 {
    color: var(--text-primary, #F1F1F1) !important;
}

/* Adaptează text-secondary pentru tema programatori */
body.theme-programatori .calendar-header-bar h1 {
    color: var(--text-primary, #ffffff) !important;
}

.calendar-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    gap: 20px;
}

.calendar-header-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
}

.calendar-header-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--calendar-header-gradient-color, var(--header-gradient-color, rgba(79, 195, 247, 0.3))), transparent) !important;
}

.calendar-header-bar h1 {
    margin: 0;
    color: var(--calendar-header-text-color, var(--text-primary, #ffffff)) !important;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 1px 2px var(--calendar-header-text-shadow, rgba(0, 0, 0, 0.5)) !important;
    font-family: var(--calendar-header-font-family, var(--font-primary, 'Rajdhani', sans-serif)) !important;
}

.calendar-header-bar h1 i {
    color: var(--calendar-header-icon-color, var(--header-icon-color)) !important;
    font-size: 20px;
    opacity: 0.9;
    filter: drop-shadow(0 0 6px var(--calendar-header-icon-shadow, var(--header-icon-shadow))) !important;
}

.calendar-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

/* Responsive design for calendar header */
@media (max-width: 768px) {
    .calendar-header-bar {
        padding: 16px 20px;
    }
    
    .calendar-header-bar h1 {
        font-size: 16px;
    }
    
    .calendar-header-bar h1 i {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .calendar-header-bar {
        padding: 14px 16px;
    }
    
    .calendar-header-bar h1 {
        font-size: 15px;
    }
    
    .calendar-header-bar h1 i {
        font-size: 16px;
    }
    
    .calendar-header-top {
        flex-direction: column;
        gap: 8px;
    }
    
    .calendar-header-actions {
        gap: 6px;
        flex-direction: column;
        align-items: center;
    }
    
    .calendar-view-controls,
    .calendar-nav-controls {
        margin: 0 !important;
        margin-bottom: 8px !important;
    }
}

/* ===== EVENT MODAL HEADER ===== */
/* 
 * Header specific pentru event modal care extinde stilul universal
 */

.event-modal-header {
    background: var(--event-header-bg, var(--header-glass-bg)) !important;
    border-bottom: 1px solid var(--event-header-border-color, var(--header-glass-border)) !important;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    backdrop-filter: blur(var(--header-glass-blur));
    -webkit-backdrop-filter: blur(var(--header-glass-blur));
}

/* Specificitate mai mare pentru tema producători */
body.theme-producatori .event-modal-header,
body.theme-content-creator .event-modal-header {
    background: var(--event-header-bg, rgba(102, 126, 234, 0.1)) !important;
}

/* Specificitate mai mare pentru tema programatori */
body.theme-programatori .event-modal-header {
    background: var(--event-header-bg, var(--header-glass-bg)) !important;
}

/* Adaptează text-secondary pentru tema producători */
body.theme-producatori .event-modal-header h3,
body.theme-content-creator .event-modal-header h3 {
    color: var(--text-primary, #F1F1F1) !important;
}

/* Adaptează text-secondary pentru tema programatori */
body.theme-programatori .event-modal-header h3 {
    color: var(--text-primary, #ffffff) !important;
}

.event-modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--event-header-gradient-color, var(--header-gradient-color, rgba(79, 195, 247, 0.3))), transparent) !important;
}

.event-modal-header h3 {
    margin: 0;
    color: var(--event-header-text-color, var(--text-primary, #ffffff)) !important;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 1px 2px var(--event-header-text-shadow, rgba(0, 0, 0, 0.5)) !important;
    font-family: var(--event-header-font-family, var(--font-primary, 'Rajdhani', sans-serif)) !important;
}

.event-modal-header h3 i {
    color: var(--event-header-icon-color, var(--header-icon-color)) !important;
    font-size: 20px;
    opacity: 0.9;
    filter: drop-shadow(0 0 6px var(--event-header-icon-shadow, var(--header-icon-shadow))) !important;
}

/* Responsive design for event modal header */
@media (max-width: 768px) {
    .event-modal-header {
        padding: 16px 20px;
    }
    
    .event-modal-header h3 {
        font-size: 16px;
    }
    
    .event-modal-header h3 i {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .event-modal-header {
        padding: 14px 16px;
    }
    
    .event-modal-header h3 {
        font-size: 15px;
    }
    
    .event-modal-header h3 i {
        font-size: 16px;
    }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    .modal-header,
    .calendar-header-bar,
    .event-modal-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
    .modal-header,
    .calendar-header-bar,
    .event-modal-header {
        background: var(--header-high-contrast-bg, rgba(15, 20, 25, 0.95));
        border-bottom: 2px solid var(--header-high-contrast-border, var(--border-color));
    }
}

/* ===== TASK MODAL HEADER COMPATIBILITY ===== */
/* 
 * Pentru compatibilitate cu codul existent
 * task-modal-header va folosi stilurile din modal-header
 */

.task-modal-header {
    background: var(--task-header-bg, var(--header-glass-bg)) !important;
    border-bottom: 1px solid var(--task-header-border-color, var(--header-glass-border)) !important;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    backdrop-filter: blur(var(--header-glass-blur));
    -webkit-backdrop-filter: blur(var(--header-glass-blur));
}

/* Specificitate mai mare pentru tema producători */
body.theme-producatori .task-modal-header,
body.theme-content-creator .task-modal-header {
    background: var(--task-header-bg, rgba(102, 126, 234, 0.1)) !important;
}

/* Specificitate mai mare pentru tema programatori */
body.theme-programatori .task-modal-header {
    background: var(--task-header-bg, var(--header-glass-bg)) !important;
}

/* Adaptează text-secondary pentru tema producători */
body.theme-producatori .task-modal-header h1,
body.theme-producatori .task-modal-header h2,
body.theme-content-creator .task-modal-header h1,
body.theme-content-creator .task-modal-header h2 {
    color: var(--text-primary, #F1F1F1) !important;
}

/* Adaptează text-secondary pentru tema programatori */
body.theme-programatori .task-modal-header h1,
body.theme-programatori .task-modal-header h2 {
    color: var(--text-primary, #ffffff) !important;
}

.task-modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--task-header-gradient-color, var(--header-gradient-color, rgba(79, 195, 247, 0.3))), transparent) !important;
}

.task-modal-header h1,
.task-modal-header h2 {
    margin: 0;
    color: var(--task-header-text-color, var(--text-primary, #ffffff)) !important;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 1px 2px var(--task-header-text-shadow, rgba(0, 0, 0, 0.5)) !important;
    font-family: var(--task-header-font-family, var(--font-primary, 'Rajdhani', sans-serif)) !important;
}

.task-modal-header h1 i,
.task-modal-header h2 i {
    color: var(--task-header-icon-color, var(--header-icon-color)) !important;
    font-size: 20px;
    opacity: 0.9;
    filter: drop-shadow(0 0 6px var(--task-header-icon-shadow, var(--header-icon-shadow))) !important;
}

.task-modal-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Responsive design for task modal header */
@media (max-width: 768px) {
    .task-modal-header {
        padding: 16px 20px;
    }
    
    .task-modal-header h1,
    .task-modal-header h2 {
        font-size: 16px;
    }
    
    .task-modal-header h1 i,
    .task-modal-header h2 i {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .task-modal-header {
        padding: 14px 16px;
    }
    
    .task-modal-header h1,
    .task-modal-header h2 {
        font-size: 15px;
    }
    
    .task-modal-header h1 i,
    .task-modal-header h2 i {
        font-size: 16px;
    }
    
    .task-modal-controls {
        gap: 6px;
    }
}

/* ===== CATEGORY MODAL HEADER ===== */
/* 
 * Header specific pentru category modal care extinde stilul universal
 */

.category-modal-header {
    background: var(--category-header-bg, var(--header-glass-bg)) !important;
    border-bottom: 1px solid var(--category-header-border-color, var(--header-glass-border)) !important;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    backdrop-filter: blur(var(--header-glass-blur));
    -webkit-backdrop-filter: blur(var(--header-glass-blur));
    border-radius: 20px 20px 0 0;
}

/* Specificitate mai mare pentru tema producători */
body.theme-producatori .category-modal-header,
body.theme-content-creator .category-modal-header {
    background: var(--category-header-bg, rgba(102, 126, 234, 0.1)) !important;
}

/* Specificitate mai mare pentru tema programatori */
body.theme-programatori .category-modal-header {
    background: var(--category-header-bg, var(--header-glass-bg)) !important;
}

/* Adaptează text-secondary pentru tema producători */
body.theme-producatori .category-modal-header h2,
body.theme-content-creator .category-modal-header h2 {
    color: var(--text-primary, #F1F1F1) !important;
}

/* Adaptează text-secondary pentru tema programatori */
body.theme-programatori .category-modal-header h2 {
    color: var(--text-primary, #ffffff) !important;
}

.category-modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--category-header-gradient-color, var(--header-gradient-color, rgba(79, 195, 247, 0.3))), transparent) !important;
}

.category-modal-header h2 {
    margin: 0;
    color: var(--category-header-text-color, var(--text-primary, #ffffff)) !important;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
    text-shadow: 0 1px 2px var(--category-header-text-shadow, rgba(0, 0, 0, 0.5)) !important;
    font-family: var(--category-header-font-family, var(--font-primary, 'Rajdhani', sans-serif)) !important;
}

.category-modal-header h2 i {
    color: var(--category-header-icon-color, var(--header-icon-color)) !important;
    font-size: 18px;
    opacity: 0.9;
    filter: drop-shadow(0 0 6px var(--category-header-icon-shadow, var(--header-icon-shadow))) !important;
}

/* Responsive design for category modal header */
@media (max-width: 768px) {
    .category-modal-header {
        padding: 16px 20px;
    }
    
    .category-modal-header h2 {
        font-size: 18px;
    }
    
    .category-modal-header h2 i {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .category-modal-header {
        padding: 14px 16px;
    }
    
    .category-modal-header h2 {
        font-size: 16px;
    }
    
    .category-modal-header h2 i {
        font-size: 14px;
    }
}