/* --- KALI DARK & XFCE THEME (Kindle-Compatible) --- */

body {
    background-color: #0f1112;
    background-size: cover;
    background-attachment: scroll; /* Kindle-safe */
    color: #eff0f1;
    font-family: 'Inter', 'Liberation Sans', sans-serif;
    margin: 0;
    padding: 0;
}

/* XFCE Top Panel Style */
header {
    background: #2d3136;
    min-height: 35px;
    padding: 5px 15px;
    border-bottom: 1px solid #3f454d;
    font-size: 13px;

    /* Removed flex, replaced with Kindle-safe layout */
    overflow: hidden;
}

header h1 {
    font-size: 14px;
    margin: 0;
    color: #0087ff;
    font-weight: bold;
    float: left;
}

/* === CONTROL BAR (REPLACES FLEXBOX) === */
.controls {
    float: right;
    white-space: nowrap;
}

.controls select,
.controls input,
.controls button {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

/* Kali UI Inputs */
input, select {
    background: #25292d;
    color: #eff0f1;
    border: 1px solid #3f454d;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 2px;
}

button {
    background: #0087ff;
    border: none;
    color: white;
    padding: 5px 15px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    border-radius: 2px;
}
button:hover { background: #0076e0; }

/* Main comparison area */
#comparison-table-container {
    padding: 20px;
    max-width: 1300px;
    margin: 0 auto;
}

/* TABLES */
table {
    width: 100%;
    background: #1a1c1e;
    border: 1px solid #3f454d;
    border-collapse: collapse;
    box-shadow: 0 15px 35px rgba(0,0,0,0.7);
    margin-bottom: 40px;
}

th.plane-header {
    background: #2d3136;
    color: #0087ff;
    padding: 15px;
    font-size: 1.1rem;
    border-bottom: 3px solid #0087ff;
}

td {
    padding: 12px;
    border: 1px solid #3f454d;
    text-align: center;
}

.category-col {
    background: #212529;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    width: 20%;
}

.vs-cell {
    font-style: italic;
    font-weight: bold;
    color: #3f454d;
}

/* ============================================================
   KINDLE-FRIENDLY “TWO COLUMN” LAYOUT FOR SIDE-BY-SIDE TABLES
   ============================================================ */

.side-by-side-wrapper {
    text-align: center;
}

.side-box {
    display: inline-block;
    vertical-align: top;
    width: 48%;
    margin: 1%;
}

/* ============================================================
   OLD MOBILE FALLBACK (Kindle ignores max-width media queries,
   but browsers that support it get the normal stacking behaviour)
   ============================================================ */

@media (max-width: 650px) {
    table, thead, tbody, th, td, tr { display: block; }

    .vs-cell { display: none; }

    th.plane-header {
        text-align: center;
        background: #111;
    }

    .category-col {
        width: 100% !important;
        background: #0087ff;
        color: #fff;
        padding: 4px;
    }

    td {
        border: none;
        border-bottom: 1px solid #3f454d;
        padding: 10px;
        text-align: left;
    }

    td:nth-of-type(1):before { content: "Plane 1: "; color: #0087ff; font-weight: bold; }
    td:nth-of-type(3):before { content: "Plane 2: "; color: #0087ff; font-weight: bold; }

    input, select { width: 100%; }
}