/**
 * Style dla bloków Gutenberg wtyczki Podsumowania
 * Dostosowane do stylistyki motywu fajne-zycie
 */

/* === ZMIENNE CSS - ZGODNE Z MOTYWEM === */
:root {
  --fz-bg: #ffffff;
  --fz-fg: #0a0a0a;
  --fz-muted: #6b7280;
  --fz-surface: #f8fafc;
  --fz-accent: #2563eb;
  --fz-border: #e2e8f0;
  --fz-border-light: #f1f5f9;
  --fz-text: #374151;
  --fz-text-light: #6b7280;
  --fz-radius: 8px;
  --fz-spacing-sm: 8px;
  --fz-spacing-md: 16px;
  --fz-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fz-bg: #0f1720;
    --fz-fg: #f1f5f9;
    --fz-muted: #94a3b8;
    --fz-surface: #1e293b;
    --fz-accent: #3b82f6;
    --fz-border: #334155;
    --fz-border-light: #475569;
    --fz-text: #e2e8f0;
    --fz-text-light: #94a3b8;
  }
}

[data-color-mode="light"] { 
  --fz-bg: #ffffff; 
  --fz-fg: #0a0a0a; 
  --fz-surface: #f8fafc; 
  --fz-muted: #6b7280; 
  --fz-accent: #2563eb; 
  --fz-border: #e2e8f0;
  --fz-border-light: #f1f5f9;
  --fz-text: #374151;
  --fz-text-light: #6b7280;
}

[data-color-mode="dark"] { 
  --fz-bg: #0f1720; 
  --fz-fg: #f1f5f9; 
  --fz-surface: #1e293b; 
  --fz-muted: #94a3b8; 
  --fz-accent: #3b82f6; 
  --fz-border: #334155;
  --fz-border-light: #475569;
  --fz-text: #e2e8f0;
  --fz-text-light: #94a3b8;
}

/* === KREATYWNY DESIGN BLOKÓW === */

/* Standardowe bloki (sen, aktywność, stres, środowisko) */
.wp-block-fajne-sen,
.wp-block-fajne-aktywnosc,
.wp-block-fajne-stres,
.wp-block-fajne-srodowisko {
    margin: 20px 0;
    padding: 0;
    border: none;
    border-radius: 12px;
    background: var(--fz-bg);
    font-family: var(--fz-font-family);
    position: relative;
    overflow: hidden;
    border-left: 5px solid var(--block-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

/* Gablota - wyróżniony design jako ogólne podsumowanie */
.wp-block-fajne-gablota {
    margin: 24px 0;
    padding: 0;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    font-family: var(--fz-font-family);
    position: relative;
    overflow: hidden;
    border: 2px solid var(--block-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: scale(1.02);
}

.wp-block-fajne-gablota::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--block-accent), transparent);
}

/* Wyrok - prosty ciemny design bez cieni i ramek */
.wp-block-fajne-wyrok {
    margin: 24px 0;
    padding: 24px;
    border: none !important;
    border-radius: 16px;
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%) !important;
    font-family: var(--fz-font-family);
    position: relative;
    overflow: visible;
    box-shadow: none !important;
    min-height: 160px;
    display: block;
}

/* Hover efekty tylko na frontendzie */
.wp-block-fajne-sen:hover,
.wp-block-fajne-aktywnosc:hover,
.wp-block-fajne-stres:hover,
.wp-block-fajne-srodowisko:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.wp-block-fajne-gablota:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.wp-block-fajne-wyrok:hover {
    transform: none;
    box-shadow: none !important;
}

/* === NAGŁÓWKI BLOKÓW === */

/* Standardowe bloki - proste nagłówki */
.wp-block-fajne-sen .fajne-block-header,
.wp-block-fajne-aktywnosc .fajne-block-header,
.wp-block-fajne-stres .fajne-block-header,
.wp-block-fajne-srodowisko .fajne-block-header {
    padding: 16px 20px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.wp-block-fajne-sen .fajne-block-title,
.wp-block-fajne-aktywnosc .fajne-block-title,
.wp-block-fajne-stres .fajne-block-title,
.wp-block-fajne-srodowisko .fajne-block-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--block-accent);
    text-transform: lowercase;
    letter-spacing: 0.5px;
}

.wp-block-fajne-sen .fajne-block-content,
.wp-block-fajne-aktywnosc .fajne-block-content,
.wp-block-fajne-stres .fajne-block-content,
.wp-block-fajne-srodowisko .fajne-block-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--fz-text);
    padding: 16px 20px 20px;
    margin: 0;
}

/* Gablota - wyróżniony nagłówek */
.wp-block-fajne-gablota .fajne-block-header {
    padding: 20px 24px 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
    border-bottom: 2px solid var(--block-accent);
    position: relative;
}

.wp-block-fajne-gablota .fajne-block-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--block-accent);
    text-transform: lowercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.wp-block-fajne-gablota .fajne-block-title::after {
    content: '📋';
    margin-left: 8px;
    font-size: 16px;
}

.wp-block-fajne-gablota .fajne-block-content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--fz-text);
    padding: 20px 24px 24px;
    margin: 0;
    font-weight: 400;
}

/* Wyrok - nagłówek bez tła i border */
.wp-block-fajne-wyrok .fajne-block-header {
    padding: 0 0 20px 0 !important;
    background: transparent !important;
    color: white !important;
    border-bottom: none !important;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wp-block-fajne-wyrok .fajne-block-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff !important;
    text-transform: lowercase;
    letter-spacing: 0.5px;
}

/* Prosty wskaźnik statusu */
.wyrok-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Status badge - ciemny design */
.wyrok-status-badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid;
}

.wp-block-fajne-wyrok.fajne-wyrok-1 .wyrok-status-badge {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
}

.wp-block-fajne-wyrok.fajne-wyrok-2 .wyrok-status-badge {
    background: #f59e0b;
    color: #ffffff;
    border-color: #f59e0b;
}

.wp-block-fajne-wyrok.fajne-wyrok-3 .wyrok-status-badge {
    background: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}

/* Duża ikona */
.wyrok-status-icon {
    font-size: 32px;
    font-weight: 900;
    animation: iconBounce 0.6s ease-out;
}

.wp-block-fajne-wyrok.fajne-wyrok-1 .wyrok-status-icon {
    color: #10b981;
}

.wp-block-fajne-wyrok.fajne-wyrok-2 .wyrok-status-icon {
    color: #f59e0b;
}

.wp-block-fajne-wyrok.fajne-wyrok-3 .wyrok-status-icon {
    color: #ef4444;
}

@keyframes iconBounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Treść bloku wyroku - minimalistyczna bez ramek */
.wp-block-fajne-wyrok .fajne-block-content {
    font-size: 15px;
    line-height: 1.6;
    color: #e2e8f0;
    padding: 0;
    margin: 0;
    background: transparent;
}

.wp-block-fajne-wyrok .wyrok-opis {
    font-style: normal;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-size: 14px;
    border: none;
    box-shadow: none;
    color: #e2e8f0;
}

/* === NOWOCZESNE STYLE DLA SPECYFICZNYCH BLOKÓW === */

/* Blok Sen */
.wp-block-fajne-sen {
    --block-accent: #10b981;
    --block-accent-rgb: 16, 185, 129;
    background: linear-gradient(135deg, 
        rgba(16, 185, 129, 0.05) 0%, 
        rgba(16, 185, 129, 0.02) 50%,
        var(--fz-bg) 100%);
}

.wp-block-fajne-sen .fajne-block-title {
    color: var(--block-accent);
}

/* Blok Aktywność */
.wp-block-fajne-aktywnosc {
    --block-accent: #3b82f6;
    --block-accent-rgb: 59, 130, 246;
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.05) 0%, 
        rgba(59, 130, 246, 0.02) 50%,
        var(--fz-bg) 100%);
}

.wp-block-fajne-aktywnosc .fajne-block-title {
    color: var(--block-accent);
}

/* Blok Stres */
.wp-block-fajne-stres {
    --block-accent: #f59e0b;
    --block-accent-rgb: 245, 158, 11;
    background: linear-gradient(135deg, 
        rgba(245, 158, 11, 0.05) 0%, 
        rgba(245, 158, 11, 0.02) 50%,
        var(--fz-bg) 100%);
}

.wp-block-fajne-stres .fajne-block-title {
    color: var(--block-accent);
}

/* Blok Środowisko */
.wp-block-fajne-srodowisko {
    --block-accent: #8b5cf6;
    --block-accent-rgb: 139, 92, 246;
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.05) 0%, 
        rgba(139, 92, 246, 0.02) 50%,
        var(--fz-bg) 100%);
}

.wp-block-fajne-srodowisko .fajne-block-title {
    color: var(--block-accent);
}

/* Blok Wyrok dnia - dodatkowe style z !important żeby nadpisać motyw */
.wp-block-fajne-wyrok * {
    color: inherit !important;
}

.wp-block-fajne-wyrok .fajne-block-header,
.wp-block-fajne-wyrok .fajne-block-title,
.wp-block-fajne-wyrok .fajne-block-content,
.wp-block-fajne-wyrok .wyrok-opis {
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    color: #e2e8f0 !important;
}

.wp-block-fajne-wyrok .fajne-block-title {
    color: #ffffff !important;
}

/* Blok Gablota */
.wp-block-fajne-gablota {
    --block-accent: #a855f7;
    --block-accent-rgb: 168, 85, 247;
    background: linear-gradient(135deg, 
        rgba(168, 85, 247, 0.05) 0%, 
        rgba(168, 85, 247, 0.02) 50%,
        var(--fz-bg) 100%);
}

.wp-block-fajne-gablota .fajne-block-title {
    color: var(--block-accent);
}

/* === STYLE DLA EDYTORA BLOKÓW === */
.block-editor-page .wp-block-fajne-sen,
.block-editor-page .wp-block-fajne-aktywnosc,
.block-editor-page .wp-block-fajne-stres,
.block-editor-page .wp-block-fajne-srodowisko,
.block-editor-page .wp-block-fajne-wyrok,
.block-editor-page .wp-block-fajne-gablota {
    border: 2px dashed #ccc;
    border-radius: 8px;
    background: #f9f9f9;
    margin: 16px 0;
    padding: 0;
    transform: none !important;
    box-shadow: none !important;
}

/* Usuń wszystkie efekty hover z edytora */
.block-editor-page .wp-block-fajne-sen:hover,
.block-editor-page .wp-block-fajne-aktywnosc:hover,
.block-editor-page .wp-block-fajne-stres:hover,
.block-editor-page .wp-block-fajne-srodowisko:hover,
.block-editor-page .wp-block-fajne-wyrok:hover,
.block-editor-page .wp-block-fajne-gablota:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Ukryj podgląd treści w edytorze */
.block-editor-page .fajne-block-content {
    display: none;
}

/* Pokaż tylko nagłówki w edytorze */
.block-editor-page .fajne-block-header {
    border-bottom: 1px solid #ddd;
    background: #fff;
}

/* === KONTROLKI EDYCJI W EDYTORZE === */
.wp-block-fajne-sen input,
.wp-block-fajne-sen textarea,
.wp-block-fajne-aktywnosc input,
.wp-block-fajne-aktywnosc textarea,
.wp-block-fajne-stres input,
.wp-block-fajne-stres textarea,
.wp-block-fajne-srodowisko input,
.wp-block-fajne-srodowisko textarea,
.wp-block-fajne-wyrok input,
.wp-block-fajne-wyrok textarea,
.wp-block-fajne-wyrok select,
.wp-block-fajne-gablota input,
.wp-block-fajne-gablota textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    font-family: var(--fz-font-family);
    background: #fff;
    color: #333;
    transition: border-color 0.2s ease;
    line-height: 1.5;
    resize: vertical;
}

.wp-block-fajne-sen input:focus,
.wp-block-fajne-sen textarea:focus,
.wp-block-fajne-aktywnosc input:focus,
.wp-block-fajne-aktywnosc textarea:focus,
.wp-block-fajne-stres input:focus,
.wp-block-fajne-stres textarea:focus,
.wp-block-fajne-srodowisko input:focus,
.wp-block-fajne-srodowisko textarea:focus,
.wp-block-fajne-wyrok input:focus,
.wp-block-fajne-wyrok textarea:focus,
.wp-block-fajne-wyrok select:focus,
.wp-block-fajne-gablota input:focus,
.wp-block-fajne-gablota textarea:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: 0 0 0 1px #007cba;
}

.wp-block-fajne-sen label,
.wp-block-fajne-aktywnosc label,
.wp-block-fajne-stres label,
.wp-block-fajne-srodowisko label,
.wp-block-fajne-wyrok label,
.wp-block-fajne-gablota label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: #1e1e1e;
}

/* Formatowanie tekstu w blokach */
.fajne-block-content strong {
    font-weight: 700;
}

.fajne-block-content em {
    font-style: italic;
}

.fajne-block-content br {
    line-height: 1.8;
}

/* Paski narzędzi formatowania */
.fajne-formatting-toolbar {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    padding: 8px;
    background: #f0f0f1;
    border-radius: 4px;
}

.fajne-formatting-toolbar button {
    padding: 6px 10px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.fajne-formatting-toolbar button:hover {
    background: #f0f0f1;
    border-color: #007cba;
}

.fajne-formatting-toolbar button.active {
    background: #007cba;
    color: #fff;
    border-color: #007cba;
}

/* === EFEKTY SPECJALNE I ANIMACJE === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wp-block-fajne-sen,
.wp-block-fajne-aktywnosc,
.wp-block-fajne-stres,
.wp-block-fajne-srodowisko,
.wp-block-fajne-wyrok,
.wp-block-fajne-gablota {
    animation: fadeInUp 0.6s ease-out;
}

/* Efekt parallax dla nagłówków */
.fajne-block-header {
    transform: translateZ(0);
    will-change: transform;
}

/* Efekt glow dla aktywnych bloków */
.wp-block-fajne-sen:focus-within,
.wp-block-fajne-aktywnosc:focus-within,
.wp-block-fajne-stres:focus-within,
.wp-block-fajne-srodowisko:focus-within,
.wp-block-fajne-wyrok:focus-within,
.wp-block-fajne-gablota:focus-within {
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        0 0 0 3px rgba(var(--block-accent-rgb), 0.2);
}

/* === RESPONSYWNOŚĆ === */
@media (max-width: 768px) {
    .wp-block-fajne-sen,
    .wp-block-fajne-aktywnosc,
    .wp-block-fajne-stres,
    .wp-block-fajne-srodowisko,
    .wp-block-fajne-gablota {
        margin: 16px 0;
        border-radius: 12px;
    }
    
    .wp-block-fajne-wyrok {
        margin: 16px 0;
        padding: 20px;
        border-radius: 12px;
        min-height: 140px;
    }
    
    .fajne-block-header {
        padding: 16px 20px 12px;
    }
    
    .wp-block-fajne-wyrok .fajne-block-header {
        padding: 0 0 16px 0;
    }
    
    .fajne-block-title {
        font-size: 16px;
    }
    
    .wp-block-fajne-wyrok .fajne-block-title {
        font-size: 18px;
    }
    
    .fajne-block-title::before {
        left: -12px;
        width: 6px;
        height: 6px;
    }
    
    .fajne-block-content {
        font-size: 14px;
        padding: 16px 20px 20px;
    }
    
    .wp-block-fajne-wyrok .fajne-block-content {
        font-size: 14px;
        padding: 0;
    }
    
    .wyrok-indicator {
        gap: 8px;
    }
    
    .wyrok-status-badge {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .wyrok-status-icon {
        font-size: 24px;
    }
    
    .wyrok-opis {
        padding: 0;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .wp-block-fajne-sen,
    .wp-block-fajne-aktywnosc,
    .wp-block-fajne-stres,
    .wp-block-fajne-srodowisko,
    .wp-block-fajne-gablota {
        margin: 12px 0;
        border-radius: 10px;
    }
    
    .wp-block-fajne-wyrok {
        margin: 12px 0;
        padding: 16px;
        border-radius: 10px;
        min-height: 120px;
    }
    
    .fajne-block-header {
        padding: 12px 16px 8px;
    }
    
    .wp-block-fajne-wyrok .fajne-block-header {
        padding: 0 0 12px 0;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    
    .fajne-block-title {
        font-size: 15px;
    }
    
    .wp-block-fajne-wyrok .fajne-block-title {
        font-size: 16px;
        text-align: center;
    }
    
    .fajne-block-content {
        font-size: 13px;
        padding: 12px 16px 16px;
    }
    
    .wp-block-fajne-wyrok .fajne-block-content {
        font-size: 13px;
        padding: 0;
    }
    
    .wyrok-indicator {
        gap: 8px;
    }
    
    .wyrok-status-badge {
        padding: 4px 10px;
        font-size: 11px;
    }
    
    .wyrok-status-icon {
        font-size: 20px;
    }
    
    .wyrok-opis {
        padding: 0;
        font-size: 12px;
    }
}

/* === INTEGRACJA Z MOTYWEM === */
/* Usuń konfliktujące style z wtyczki */
.post-podsumowanie,
.podsumowanie {
    padding: 0 !important;
    margin: 0 0 calc(var(--fz-spacing-md) * 1.5) 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    transition: none !important;
    transform: none !important;
}

/* Wyjątek: CPT Podsumowanie dnia – zawsze czerwony */
.stream-item.post-podsumowanie,
.podsumowanie {
    --category-color: #ef4444;
}

/* Usuń wszystkie efekty hover z wtyczki */
.post-podsumowanie:hover,
.podsumowanie:hover,
.strumien-zycia .podsumowanie:hover,
.archive-podsumowanie .podsumowanie:hover {
    transform: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* Usuń wszystkie ramki z wtyczki Podsumowań */
.strumien-zycia .podsumowanie,
.archive-podsumowanie .podsumowanie {
    border: none !important;
}

/* Usuń konfliktujące style z wtyczki */
.stream-item.post-podsumowanie .podsumowanie-header {
    margin-top: var(--fz-spacing-md) !important;
    margin-bottom: var(--fz-spacing-sm) !important;
}

.day-number {
    font-size: 1rem;
    font-weight: 600;
    color: var(--fz-fg);
}

.day-status {
    font-size: 0.8rem;
}

.day-date {
    font-size: 0.8rem;
    color: var(--fz-muted);
}