:root {
    /* 🎯 kolory bazowe */
    --ink: #1a2a44;
    --ink-soft: rgba(26, 42, 68, 0.5);
    --paper: #fcfcfd;
    --bg: #f6f6f6;
    /* 📊 akcenty (zostają kolorowe) */
    --accent: #2ecc71;
    --accent-blue: #3498db;
    --accent-red: #e74c3c;
    --accent-orange: #f39c12;
    /* 🧱 layout */
    --radius: 3px;
    --shadow-soft: 0px 12px 30px rgba(0, 0, 0, 0.12);
    --shadow-hard: 0px 1px 0px rgba(0, 0, 0, 0.6);
}

/* 🌍 tło aplikacji */
body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Inter", "Segoe UI", sans-serif;
    background-color: #fafafa;
    background-image: radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
    background-size: 20px 20px;
}

/*.paper {
    background-color: var(--paper);
    background-image: linear-gradient(#ececec 1px, transparent 1px), linear-gradient(90deg, #ececec 1px, transparent 1px);
    background-size: 20px 20px;
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hard), var(--shadow-soft);
    padding: 16px;
    position: relative;*/ /* konieczne */
/*}*/

.paper {
    background-color: var(--paper);
    background-image: linear-gradient(rgba(26,42,68,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(26,42,68,0.08) 1px, transparent 1px);
    background-size: 20px 20px;
    border: 1px solid var(--ink-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    padding: 16px;
    position: relative;
}

/* 📄 marginesy jak w zeszycie (tylko duże ekrany) */
@media (min-width: 1024px) {

    .paper.with-margins {
        /* fizyczne 2.5 cm */
        padding-left: 2.5cm;
        padding-right: 2.5cm;
    }

        .paper.with-margins::before,
        .paper.with-margins::after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            width: 1px;
            /* delikatna linia */
            background: rgba(200, 0, 0, 0.25);
            pointer-events: none;
        }

        /* lewy margines */
        .paper.with-margins::before {
            left: 2.0cm;
        }

        /* prawy margines */
        .paper.with-margins::after {
            right: 2.0cm;
        }
}

.paper-hover {
    transition: 0.15s ease;
    cursor: pointer;
}

    .paper-hover:hover {
        transform: translate(-2px, -2px);
        box-shadow: 4px 4px 0px #000, 10px 10px 20px rgba(0,0,0,0.2);
    }

    .paper-hover:active {
        transform: translate(1px, 1px);
        box-shadow: 1px 1px 0px #000;
    }


h1, h2, h3, h4, h5 {
    font-family: "Georgia", serif;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.paper h5 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 6px;
    margin-bottom: 10px;
}


.table-paper {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: white;
}

    .table-paper th {
        text-align: left;
        border-bottom: 2px solid #000;
        padding: 6px;
        background: #f5f5f5;
    }

    .table-paper td {
        border-bottom: 1px solid #bbb;
        padding: 6px;
    }

    .table-paper tr:nth-child(even) {
        background: #fafafa;
    }

    .table-paper tr:hover {
        background: #f0f0f0;
    }

    .table-paper input.w3-input {
        padding: 2px 6px;
        margin: 0;
        height: 20px;
    }

    .table-paper select.w3-select {
        padding: 2px 6px;
        margin: 0;
        height: 20px;
    }

/* ✅ BEZPIECZNY (zielony) */
.btn-success {
    background-color: #2ecc71 !important;
    color: white !important;
}

/* 🔵 NEUTRALNY (niebieski) */
.btn-primary {
    background-color: #3498db !important;
    color: white !important;
}

/* 🔴 NIEBEZPIECZNY (czerwony) */
.btn-danger {
    background-color: #e74c3c !important;
    color: white !important;
}

/* 🟠 TECHNICZNY (pomarańczowy) */
.btn-tech {
    background-color: #f39c12 !important;
    color: white !important;
}

.w3-button.btn-success:hover {
    background-color: #27ae60 !important;
}

.w3-button.btn-primary:hover {
    background-color: #2c80b4 !important;
}

.w3-button.btn-danger:hover {
    background-color: #c0392b !important;
}

.w3-button.btn-tech:hover {
    background-color: #d68910 !important;
}

.frame {
    border-radius: var(--radius);
    border: 1px solid #000;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    border: 1px solid #000;
}

.badge-ok {
    background: var(--accent);
    color: white;
}

.badge-warn {
    background: var(--accent-orange);
    color: white;
}

.badge-error {
    background: var(--accent-red);
    color: white;
}

.chart-box {
    border: 2px solid #000;
    border-radius: var(--radius);
    padding: 10px;
    background: white;
}

.note {
    background: #f9f9f9;
    border-left: 4px solid #000;
    padding: 10px;
    font-size: 13px;
}

.hr-paper {
    border: none;
    height: 1px;
    background: linear-gradient( to right, transparent, #000, transparent );
    margin: 20px 0;
}

.hr-strong {
    border: none;
    border-top: 3px solid #000;
    margin: 20px 0;
}