:root {
    --primary: #FFC107; 
    --primary-dark: #E0A800;
    --text-dark: #111827;
    --text-dark-light: #1F2937;
    --text-muted: #6B7280;
    --bg-body: #F3F4F6;
    --bg-card: #FFFFFF;
    --border-light: #E5E7EB;
    --border-heavy: #111827;
    --row-hover: #FEF3C7; 
    --danger: #DC2626;
}

body { 
    font-family: 'Roboto', sans-serif; 
    background-color: var(--bg-body); 
    margin: 0; 
    padding: 40px 15px; 
    color: var(--text-dark); 
    scroll-behavior: smooth; 
}

.page-container { 
    background-color: var(--bg-card); 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 60px; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.08); 
    border-radius: 4px; 
}

h1, h2 { text-align: left; text-transform: uppercase; font-weight: 900; color: var(--text-dark); letter-spacing: 0.5px; margin-top: 0;}
h2 { font-size: 22px; border-bottom: 3px solid var(--primary); padding-bottom: 8px; margin-bottom: 25px; display: inline-block; padding-right: 40px;}

.branding-header {
    display: flex; align-items: center; justify-content: flex-start; gap: 30px;
    margin-bottom: 40px; padding-bottom: 25px; border-bottom: 2px solid var(--border-heavy);
}
.logo-img { width: 140px; height: auto; display: block; flex-shrink: 0; }
.company-name { font-size: 28px; font-weight: 900; text-transform: uppercase; color: var(--text-dark); letter-spacing: 1px; margin: 0; line-height: 1.2; }

.drop-zone { 
    border: 2px dashed var(--text-muted); padding: 60px 20px; text-align: center; 
    background-color: #F9FAFB; cursor: pointer; transition: all 0.3s ease; 
    margin-bottom: 40px; border-radius: 4px;
}
.drop-zone:hover, .drop-zone.dragover { background-color: var(--row-hover); border-color: var(--primary-dark); color: var(--primary-dark); }
.drop-zone input[type="file"] { display: none; }

.header-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
    padding: 0; margin-bottom: 40px; font-family: 'Roboto', sans-serif;
}
.header-box { background: #F9FAFB; padding: 20px; border-left: 5px solid var(--primary); border-radius: 0 4px 4px 0; }
.header-box h3 { color: var(--text-dark); font-size: 14px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; font-weight: 900; border-bottom: 1px solid var(--border-light); padding-bottom: 8px;}
.header-data p { margin: 12px 0; font-size: 14px; display: flex; align-items: flex-start;}
.header-data strong { display: inline-block; width: 140px; color: var(--text-muted); flex-shrink: 0; font-weight: 700; text-transform: uppercase; font-size: 12px; margin-top: 2px;}

.envelope-address { line-height: 1.6; font-weight: 500; color: var(--text-dark);}
.signatures-box { font-weight: 700; color: var(--text-dark); line-height: 1.6; }

.controls-panel { 
    display: flex; justify-content: center; gap: 15px; margin-bottom: 50px; 
    padding: 20px; background: #F9FAFB; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); flex-wrap: wrap;
}
.btn { 
    padding: 10px 24px; border: 2px solid var(--text-dark); background-color: transparent; 
    color: var(--text-dark); cursor: pointer; font-size: 13px; font-weight: 700; 
    border-radius: 2px; transition: all 0.2s; text-transform: uppercase; letter-spacing: 0.5px;
    font-family: 'Roboto', sans-serif;
}
.btn:hover { background-color: var(--primary); border-color: var(--primary); color: var(--text-dark); }
.btn-active { background-color: var(--text-dark); color: #fff; border-color: var(--text-dark); }
.btn-active:hover { background-color: var(--primary); color: var(--text-dark); border-color: var(--primary);}

.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background-color: var(--danger); color: #fff; border-color: var(--danger);}

.info-toggle { 
    cursor: pointer; font-size: 15px; font-weight: 700; color: var(--text-dark);
    background: var(--primary); padding: 16px 20px; border: none; 
    border-radius: 2px; transition: background 0.2s; text-transform: uppercase; letter-spacing: 1px;
}
.info-toggle:hover { background: var(--primary-dark); }
.info-content { 
    padding: 30px; background: #fff; border: 1px solid var(--border-light); 
    border-top: none; font-size: 14px; line-height: 1.8; max-height: 600px; 
    overflow-y: auto; text-align: justify; color: var(--text-dark);
}

.kpi-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: flex-start;}
.kpi-card { 
    background: var(--text-dark); border: none; border-radius: 4px; 
    box-shadow: 0 8px 15px rgba(0,0,0,0.1); overflow: hidden; display: flex; flex-direction: column; color: #ffffff; 
}
.kpi-header { background: var(--text-dark-light); padding: 16px 20px; border-bottom: 2px solid var(--primary); text-align: left;}
.kpi-title { font-weight: 900; font-size: 13px; color: #fff; text-transform: uppercase; letter-spacing: 1px;}
.kpi-values { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; background: var(--text-dark); }
.kpi-val-box { text-align: left; }
.kpi-val-label { font-size: 11px; color: #9CA3AF; text-transform: uppercase; margin-bottom: 6px; font-weight: 700;}
.kpi-val-number { font-family: 'Consolas', 'Courier New', Courier, monospace; font-size: 24px; font-weight: 700; color: var(--primary); }

.status-good { color: #34D399; } .status-warn { color: #FBBF24; } .status-bad { color: #F87171; }

.kpi-legend-toggle { 
    background: var(--text-dark-light); color: #D1D5DB; text-align: center; padding: 12px; 
    font-size: 12px; font-weight: 700; cursor: pointer; transition: background 0.2s, color 0.2s; 
    border-top: 1px solid #374151; text-transform: uppercase;
}
.kpi-legend-toggle:hover { background: #374151; color: var(--primary);}
.kpi-legend-text { padding: 15px 20px; font-size: 13px; line-height: 1.6; background: #374151; border-top: 1px solid #4B5563; color: #E5E7EB; text-align: left;}
.kpi-legend-text strong { color: var(--primary); }

.report-section { display: flex; gap: 40px; margin-bottom: 60px; flex-wrap: wrap;}
.half-width { flex: 1; min-width: 45%; }
.full-width { width: 100%; }

table { width: 100%; border-collapse: collapse; font-size: 13px; border: none; }
th, td { border: none; padding: 12px 10px; vertical-align: middle; }
td { border-bottom: 1px solid var(--border-light); }

th.header-main { 
    background-color: var(--primary); color: var(--text-dark); font-size: 15px; 
    text-transform: uppercase; font-weight: 900; letter-spacing: 1px; 
    padding: 16px; text-align: center; border: none;
}
th { background-color: #fff; color: var(--text-muted); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; border-bottom: 2px solid var(--border-heavy);}
th.col-name { text-align: left; }
th.col-value { text-align: right; }

.col-name { width: 50%; }
.col-value { width: 25%; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

tbody tr { transition: background-color 0.15s ease; }
tbody tr:hover { background-color: var(--row-hover); cursor: default;}

.row-expandable { cursor: pointer; }
.icon { display: inline-block; width: 16px; font-size: 11px; color: var(--text-dark); text-align: center; font-weight: 900;}

.depth-0 { font-weight: 900; color: var(--text-dark); text-transform: uppercase; } 
.depth-1 { font-weight: 700; padding-left: 25px; color: var(--text-dark);}       
.depth-2 { padding-left: 40px; color: var(--text-dark);}                           
.depth-3 { padding-left: 55px; color: var(--text-dark);}                           
.depth-4 { padding-left: 70px; color: var(--text-muted); font-size: 12px;}       
.depth-5 { padding-left: 85px; color: var(--text-muted); font-size: 12px;}
.depth-6 { padding-left: 100px; color: #9CA3AF; font-size: 12px;}

.total-row td { font-weight: 900; background-color: #F9FAFB; font-size: 14px; border-top: 2px solid var(--border-heavy); color: var(--text-dark); text-transform: uppercase; border-bottom: none;}

.hidden { display: none !important; }
body.hide-empty .is-empty-row { display: none !important; }
#error-msg { color: var(--danger); text-align: center; font-weight: 700; margin-bottom: 20px; background: #FEE2E2; padding: 15px; border-radius: 4px; border: 1px solid #FCA5A5;}

@media (max-width: 1050px) {
    .report-section { flex-direction: column; }
    .half-width { width: 100%; min-width: 100%; }
}

@media (max-width: 940px) {
    .branding-header { flex-direction: column; justify-content: center; text-align: center; gap: 15px; }
    .header-grid { grid-template-columns: 1fr; gap: 20px;}
    .header-box { border-left: none; border-top: 5px solid var(--primary); border-radius: 0 0 4px 4px;}
    .controls-panel { flex-direction: column; align-items: stretch; border-left: none; border-right: none;}
    .controls-panel .btn { width: 100%; }
    .page-container { padding: 30px 15px; }
}

/* =========================================================================
   PRZYCISK "POWRÓT DO GÓRY"
   ========================================================================= */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--text-dark);
    color: var(--primary);
    border: 2px solid var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Animacje płynnego pojawiania się i hovera */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.2s, color 0.2s;
    z-index: 1000;
    
    /* Domyślnie ukryty i lekko przesunięty w dół */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: var(--primary);
    color: var(--text-dark);
    border-color: var(--text-dark);
    transform: translateY(-3px); /* Lekkie uniesienie przy najechaniu */
}

.back-to-top svg {
    width: 22px;
    height: 22px;
}

/* Responsywność dla mniejszych ekranów */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
}