/* ------------------------------------------------ */
/* Global */
/* ------------------------------------------------ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    font-family: Arial, Helvetica, sans-serif;

    background: #f4f6f9;

    color: #222;

    padding: 40px;

}

.container {

    max-width: 1100px;

    margin: auto;

}


/* ------------------------------------------------ */
/* Header */
/* ------------------------------------------------ */

header {

    margin-bottom: 30px;

}

header h1 {

    color: #2c3e50;

    margin-bottom: 10px;

}

.subtitle {

    color: #666;

    margin-bottom: 5px;

}

.tables {

    color: #888;

    font-size: 0.9rem;

}


/* ------------------------------------------------ */
/* Form */
/* ------------------------------------------------ */

form {

    margin-bottom: 25px;

}

label {

    display: block;

    font-weight: bold;

    margin-bottom: 10px;

}

textarea {

    width: 100%;

    resize: vertical;

    min-height: 120px;

    border: 1px solid #ccc;

    border-radius: 6px;

    padding: 12px;

    font-size: 1rem;

    font-family: inherit;

    margin-bottom: 15px;

}

textarea:focus {

    outline: none;

    border-color: #0078d4;

    box-shadow: 0 0 4px rgba(0,120,212,.25);

}

button {

    background: #0078d4;

    color: white;

    border: none;

    padding: 12px 22px;

    border-radius: 6px;

    cursor: pointer;

    font-size: 1rem;

}

button:hover {

    background: #005fa3;

}


/* ------------------------------------------------ */
/* Cards */
/* ------------------------------------------------ */

.card {

    background: white;

    padding: 20px;

    margin-top: 20px;

    border-radius: 8px;

    box-shadow: 0 2px 8px rgba(0,0,0,.08);

}

.card h2 {

    margin-bottom: 15px;

    color: #2c3e50;

}

.error {

    border-left: 6px solid #d32f2f;

}


/* ------------------------------------------------ */
/* SQL Display */
/* ------------------------------------------------ */

pre {

    background: #272822;

    color: #f8f8f2;

    padding: 15px;

    overflow-x: auto;

    border-radius: 6px;

    white-space: pre-wrap;

    word-wrap: break-word;

}


/* ------------------------------------------------ */
/* Table */
/* ------------------------------------------------ */

.table-wrapper {

    overflow-x: auto;

}

table {

    width: 100%;

    border-collapse: collapse;

}

th {

    background: #0078d4;

    color: white;

    text-align: left;

    padding: 10px;

}

td {

    padding: 10px;

    border-bottom: 1px solid #ddd;

}

tbody tr:nth-child(even) {

    background: #f8f8f8;

}

tbody tr:hover {

    background: #eef5ff;

}


/* ------------------------------------------------ */
/* Explanation */
/* ------------------------------------------------ */

.card p {

    line-height: 1.7;

    font-size: 1rem;

}


/* ------------------------------------------------ */
/* Mobile */
/* ------------------------------------------------ */

@media (max-width: 768px) {

    body {

        padding: 15px;

    }

    button {

        width: 100%;

    }

    h1 {

        font-size: 1.7rem;

    }

}