/* ==========================================================================
KONTENERY GŁÓWNE I RESPONSYWNY UKŁAD (DESKTOP / MOBILE)
========================================================================== */

.task-page-container {
max-width: 900px;
width: 100%;
margin: 30px auto;
padding: 0 20px;
flex: 1;
display: flex;
flex-direction: column;
gap: 30px;
box-sizing: border-box;
min-width: 0; /* KLUCZOWE: Zapobiega rozpychaniu kontenera flex przez dzieci */
}

.task-action-bar {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 15px 25px;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
width: 100%;
}

.btn-scroll {
background-color: #0f172a;
color: white;
text-decoration: none;
padding: 10px 18px;
font-weight: 600;
border-radius: 6px;
font-size: 0.9rem;
transition: background 0.2s;
white-space: nowrap;
}

.btn-scroll:hover {
background-color: #1e293b;
}

/* ==========================================================================
SEKCJE TEKSTOWE
========================================================================== */

.content-section {
background: white;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 30px;
box-shadow: 0 1px 3px rgba(0,0,0,0.01);
box-sizing: border-box;
width: 100%;
min-width: 0; /* KLUCZOWE: Zezwala kontenerowi na kurczenie się na telefonach */
}

.content-section h2 {
font-size: 1.4rem;
color: #0f172a;
margin-bottom: 20px;
border-bottom: 2px solid #e95420;
padding-bottom: 8px;
display: inline-block;
}

.content-section h3 {
font-size: 1.1rem;
color: #1e293b;
margin: 15px 0 8px 0;
font-weight: 600;
}

.content-section p {
color: #475569;
line-height: 1.6;
margin-bottom: 12px;
font-size: 0.98rem;
}

/* ==========================================================================
TERMINAL I KOMENDY (SAM ZIELONY TEKST)
========================================================================== */

.cmd-box {
background: #0f172a;
padding: 12px 18px;
border-radius: 6px;
margin: 10px 0 20px 0;
font-size: 0.95rem;
overflow-x: auto; /* Przewijanie poziome komendy, jeśli jest za długa */
box-sizing: border-box;
max-width: 100%;
width: 100%;
}

.cmd-box code {
color: #00ff66;
font-family: 'Courier New', Courier, monospace;
font-weight: 600;
white-space: nowrap;
}

/* ==========================================================================
INTERAKTYWNA KONSOLA NETPLAN / APACHE
========================================================================== */

.console-mockup {
background: #1e1e1e;
border-radius: 8px;
padding: 20px;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 0.95rem;
color: #d4d4d4;
line-height: 1.5;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
overflow-x: auto; /* Przewijanie kodu YAML na telefonie */
box-sizing: border-box;
position: relative;
max-width: 100%;
width: 100%;
}

.console-header {
color: #6a9955;
margin-bottom: 15px;
font-style: italic;
border-bottom: 1px solid #333;
padding-bottom: 5px;
}

.console-line {
position: relative;
padding: 2px 6px;
border-radius: 4px;
cursor: help;
display: block;
white-space: pre;
width: max-content;
min-width: 100%;
}
.console-line1 {
position: relative;
padding: 2px 6px;
border-radius: 4px;
cursor: help;
display: block;
white-space: pre;
width: max-content;
min-width: 100%;
box-sizing: border-box;
}

.console-line:hover {
background: #2d2d2d;
color: #fff;
}

.console-line .tooltip-text {
visibility: hidden;
width: 280px;
background-color: #334155;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 10px 14px;
position: absolute;
z-index: 10;
bottom: 125%;
left: 10%;
opacity: 0;
transition: opacity 0.2s;
font-family: sans-serif;
font-size: 0.85rem;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
border: 1px solid #475569;
pointer-events: none;
white-space: normal;
}

.console-line:hover .tooltip-text {
visibility: visible;
opacity: 1;
}

/* Standardowe wcięcia YAML (Desktop) */
.indent-2 { padding-left: 20px; }
.indent-4 { padding-left: 40px; }
.indent-6 { padding-left: 60px; }
.indent-8 { padding-left: 80px; }
.indent-10 { padding-left: 100px; }
.indent-12 { padding-left: 120px; }
.indent-14 { padding-left: 140px; }

/* ==========================================================================
GENERATOR I PANEL PUNKTOWY
========================================================================== */

.generator-box {
background: #f8fafc;
border: 2px dashed #cbd5e1;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-sizing: border-box;
width: 100%;
}

.target-param {
font-size: 1.05rem;
color: #0f172a;
margin-bottom: 8px;
}

.target-param strong {
color: #e95420;
font-family: monospace;
font-size: 1.1rem;
}

.yaml-textarea {
width: 100%;
height: 250px;
background: #1e1e1e;
color: #f8fafc;
font-family: 'Consolas', monospace;
padding: 15px;
border-radius: 6px;
border: 1px solid #475569;
resize: vertical;
font-size: 0.95rem;
margin-top: 15px;
line-height: 1.5;
box-sizing: border-box;
}

.yaml-textarea:focus {
border-color: #e95420;
outline: none;
}

.btn-verify {
background-color: #e95420;
color: white;
border: none;
padding: 12px 24px;
font-size: 1rem;
font-weight: 600;
border-radius: 6px;
cursor: pointer;
transition: background 0.2s;
margin-top: 15px;
box-sizing: border-box;
width: auto;
}

.btn-verify:hover {
background-color: #cf4317;
}

/* Wyniki */
.result-box {
margin-top: 20px;
padding: 20px;
border-radius: 8px;
display: none;
border: 1px solid #e2e8f0;
background: #ffffff;
box-sizing: border-box;
width: 100%;
}

.score-banner {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 15px;
color: #0f172a;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 10px;
}

.criteria-list {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 15px;
}

.criteria-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.95rem;
font-weight: 600;
}

.criteria-item i {
font-size: 1.1rem;
}

.crit-success { color: #10b981; }
.crit-fail { color: #ef4444; }

.feedback-message {
padding: 12px;
border-radius: 6px;
font-size: 0.9rem;
line-height: 1.5;
margin-top: 15px;
}

.feedback-success { background-color: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.feedback-partial { background-color: #fffbeb; color: #92400e; border: 1px solid #fef3c7; }
.feedback-error { background-color: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* Kontener na obrazki */
.image-container {
background-color: #64748b !important;
border-radius: 12px;
border: 3px solid #475569;
padding: 15px;
display: flex;
justify-content: center;
align-items: center;
margin: 15px 0;
max-width: 100%;
box-sizing: border-box;
}

.image-container img {
max-width: 100%;
width: auto;
height: auto;
border-radius: 6px;
display: block;
}

/* ==========================================================================
RESPONSYWNE EMULACJE DLA SMARTFONÓW (MEDIA QUERIES)
========================================================================== */

@media (max-width: 768px) {
/* Mniejsze marginesy na urządzeniach mobilnych */
.task-page-container {
margin: 15px auto;
padding: 0 10px;
gap: 15px;
}

.content-section {
    padding: 20px 15px; /* Więcej miejsca na treść */
}

/* Dopasowanie paska nawigacji zadania */
.task-action-bar {
    padding: 12px 15px;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.btn-scroll {
    width: 100%;
    text-align: center;
}

/* STREAMING_CHUNK: Zwiększenie wcięć dla czytelności struktury YAML na telefonie */
/* Skalowanie w dół wcięć YAML, które teraz przewijają się bez błędów */
.indent-2 { padding-left: 12px; }
.indent-4 { padding-left: 24px; }
.indent-6 { padding-left: 36px; }
.indent-8 { padding-left: 48px; }
.indent-10 { padding-left: 60px; }
.indent-12 { padding-left: 72px; }
.indent-14 { padding-left: 84px; }

/* POPRAWKA TOOLTIPÓW NA MOBILE */
.console-line { 
    position: static; 
}

.console-line .tooltip-text {
    width: auto !important;
    left: 15px !important;
    right: 15px !important;
    bottom: auto !important;
    top: 10px !important; /* Wyświetla dymek ładnie u góry makiety */
    transform: none !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}


}

@media (max-width: 480px) {
    .content-section h2 {
    font-size: 1.2rem;
    }
}

.btn-verify {
    width: 100%;
}