/**
 * 📚 Book Constructor V3 - Glassmorphism Styles
 * Стили "жидкого стекла" как в iOS/macOS
 * 
 * @version 3.0.0
 */

/* ==================== БАЗОВЫЕ GLASS КОМПОНЕНТЫ ==================== */

/* Основная glass панель */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
}

.glass-sm {
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
}

.glass-md {
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
}

.glass-xl {
    backdrop-filter: blur(var(--blur-xl));
    -webkit-backdrop-filter: blur(var(--blur-xl));
}

/* Glass карточка с эффектами */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: 
        0 8px 32px var(--glass-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all var(--transition-normal);
}

.glass-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    box-shadow: 
        0 12px 40px var(--glass-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

/* Glass панель (плоская, без hover эффектов) */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}

/* Glass с внутренним свечением */
.glass-glow {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: 
        0 8px 32px var(--glass-shadow),
        inset 0 0 80px rgba(139, 92, 246, 0.05);
}

/* ==================== GLASS КНОПКИ ==================== */

.btn-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    height: var(--btn-height-md);
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn-glass:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    transform: translateY(-1px);
}

.btn-glass:active {
    background: var(--glass-bg-active);
    transform: translateY(0);
}

.btn-glass.active,
.btn-glass.selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-on-primary);
    box-shadow: var(--shadow-glow-sm);
}

/* Glass кнопка primary */
.btn-glass-primary {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.8), 
        rgba(99, 102, 241, 0.8));
    border-color: rgba(139, 92, 246, 0.3);
    color: white;
    box-shadow: var(--shadow-glow-sm);
}

.btn-glass-primary:hover {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.9), 
        rgba(99, 102, 241, 0.9));
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

/* Glass кнопка success */
.btn-glass-success {
    background: linear-gradient(135deg, 
        rgba(34, 197, 94, 0.8), 
        rgba(22, 163, 74, 0.8));
    border-color: rgba(34, 197, 94, 0.3);
    color: white;
}

/* Glass кнопка danger */
.btn-glass-danger {
    background: linear-gradient(135deg, 
        rgba(239, 68, 68, 0.8), 
        rgba(220, 38, 38, 0.8));
    border-color: rgba(239, 68, 68, 0.3);
    color: white;
}

/* ==================== GLASS ИНПУТЫ ==================== */

.input-glass {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    height: var(--input-height-md);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-family: inherit;
    transition: all var(--transition-fast);
}

.input-glass::placeholder {
    color: var(--text-muted);
}

.input-glass:hover {
    border-color: var(--glass-border-hover);
}

.input-glass:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--glass-bg-hover);
    box-shadow: 
        0 0 0 3px rgba(139, 92, 246, 0.15),
        var(--shadow-glow-sm);
}

/* Glass textarea */
.textarea-glass {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    min-height: 100px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-family: inherit;
    resize: vertical;
    transition: all var(--transition-fast);
}

.textarea-glass:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

/* Glass select */
.select-glass {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    padding-right: var(--space-10);
    height: var(--input-height-md);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: var(--text-base);
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: all var(--transition-fast);
}

.select-glass:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* ==================== GLASS МОДАЛКИ ==================== */

.modal-overlay.glass {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal-content.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-xl));
    -webkit-backdrop-filter: blur(var(--blur-xl));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-2xl);
    box-shadow: 
        0 24px 80px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ==================== GLASS ТУЛБАР ==================== */

.toolbar-glass {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
}

/* ==================== GLASS TABS ==================== */

.tabs-glass {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}

.tab-glass {
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tab-glass:hover {
    color: var(--text-primary);
    background: var(--glass-bg-hover);
}

.tab-glass.active {
    background: var(--color-primary);
    color: white;
    box-shadow: var(--shadow-glow-sm);
}

/* ==================== GLASS DROPDOWN ==================== */

.dropdown-glass {
    position: absolute;
    min-width: 180px;
    padding: var(--space-2);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-dropdown);
}

.dropdown-item-glass {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.dropdown-item-glass:hover {
    background: var(--glass-bg-hover);
}

.dropdown-item-glass.active {
    background: rgba(139, 92, 246, 0.15);
    color: var(--primary-400);
}

/* ==================== GLASS TOOLTIP ==================== */

.tooltip-glass {
    position: absolute;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-elevated);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--glass-border-light);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-xs);
    white-space: nowrap;
    box-shadow: var(--shadow-lg);
    z-index: var(--z-tooltip);
    pointer-events: none;
}

/* ==================== GLASS PROGRESS BAR ==================== */

.progress-glass {
    height: 8px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-glass-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-400));
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

/* ==================== GLASS BADGE ==================== */

.badge-glass {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    background: var(--glass-bg-light);
    backdrop-filter: blur(var(--blur-sm));
    -webkit-backdrop-filter: blur(var(--blur-sm));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.badge-glass.primary {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
    color: var(--primary-400);
}

.badge-glass.success {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: var(--success-400);
}

.badge-glass.warning {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--warning-400);
}

.badge-glass.error {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--error-400);
}

/* ==================== ЭФФЕКТ СВЕЧЕНИЯ ==================== */

.glow-primary {
    box-shadow: var(--shadow-glow);
}

.glow-success {
    box-shadow: var(--shadow-glow-success);
}

.glow-error {
    box-shadow: var(--shadow-glow-error);
}

/* Пульсирующее свечение */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(139, 92, 246, 0);
    }
}

.pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}