/* ============================
   GLOBAL RESET & BASE
============================ */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Segoe UI, Tahoma, sans-serif;
    background: #0b0f14;
    color: #e6edf3;
}

/* ============================
   HEADER
============================ */
header {
    background: linear-gradient(90deg, #020617, #0b1c2d);
    padding: 15px 30px;
    border-bottom: 1px solid #12263a;
}

header h1 {
    margin: 0;
    font-size: 20px;
    color: #00e5ff;
    letter-spacing: 1px;
}

/* ============================
   LAYOUT
============================ */
.container {
    padding: 30px;
    max-width: 1100px;
    margin: auto;
}

.card {
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

/* ============================
   FORM ELEMENTS
============================ */
input,
select {
    width: 100%;
    padding: 10px;
    background: #020617;
    border: 1px solid #1f2937;
    color: #fff;
    border-radius: 4px;
    margin-bottom: 15px;
}

button {
    background: #0d6efd;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background: #084298;
}

/* ============================
   STATUS INDICATORS
============================ */
.status-ok {
    color: #00c853;
    font-weight: bold;
}

.status-bad {
    color: #ff4d4d;
    font-weight: bold;
}

.status-ok::before {
    content: "[SYSTEM OK] ";
    color: #00e676;
    font-family: monospace;
}

.status-bad::before {
    content: "[THREAT] ";
    color: #ff5252;
    font-family: monospace;
}

/* ============================
   TEXT & ELEMENTS
============================ */
a {
    color: #00e5ff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

hr {
    border: none;
    border-top: 1px solid #12263a;
    margin: 20px 0;
}

small {
    color: #9aa4b2;
    font-family: monospace;
}

/* ============================
   TABLES (DESKTOP)
============================ */
table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #1f2937;
    padding: 10px;
    text-align: left;
}

th {
    background: #020617;
}

/* ============================
   FOOTER
============================ */
footer {
    text-align: center;
    padding: 15px;
    font-size: 11px;
    color: #9aa4b2;
    border-top: 1px solid #12263a;
}

/* ==================================================
   📱 MOBILE RESPONSIVE (≤ 768px)
================================================== */
@media (max-width: 768px) {

    header {
        padding: 12px 16px;
    }

    header h1 {
        font-size: 16px;
    }

    .container {
        padding: 15px;
    }

    .card {
        padding: 15px;
    }

    h2 {
        font-size: 16px;
    }

    /* Convert tables into mobile cards */
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }

    thead {
        display: none;
    }

    tr {
        background: #020617;
        border: 1px solid #1f2937;
        border-radius: 6px;
        margin-bottom: 15px;
        padding: 10px;
    }

    td {
        border: none;
        padding: 6px 0;
        font-size: 13px;
    }

    td::before {
        display: block;
        font-weight: bold;
        color: #9aa4b2;
        margin-bottom: 2px;
    }

    td:nth-child(1)::before { content: "ID"; }
    td:nth-child(2)::before { content: "Name"; }
    td:nth-child(3)::before { content: "QR"; }
    td:nth-child(4)::before { content: "Status"; }
    td:nth-child(5)::before { content: "Action"; }

    img {
        max-width: 100%;
        height: auto;
    }

    button {
        width: 100%;
        margin-bottom: 8px;
    }
}