/* =====================================================
   TurnTrack v2.0.001
   style.css
===================================================== */

/* ==========================
   RESET
========================== */

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

body {

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

    background: #eef3f8;

    color: #222;

    padding: 15px;

}

/* ==========================
   CONTAINER
========================== */

.container {

    max-width: 700px;

    margin: auto;

}

/* ==========================
   HEADER
========================== */

header {

    text-align: center;

    margin-bottom: 20px;

}

header h1 {

    color: #0b5ed7;

    font-size: 32px;

    margin-bottom: 6px;

}

header p {

    color: #666;

    font-size: 15px;

}

/* ==========================
   CLOCKS
========================== */

.clockSection {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-bottom: 20px;

}

.clockCard {

    background: white;

    border-radius: 12px;

    padding: 18px;

    text-align: center;

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

}

.clockLabel {

    color: #777;

    font-size: 13px;

    margin-bottom: 8px;

    letter-spacing: 1px;

}

.clockTime {

    font-size: 26px;

    font-weight: bold;

    color: #0b5ed7;

}

/* ==========================
   CARDS
========================== */

.card {

    background: white;

    border-radius: 12px;

    padding: 16px;

    margin-bottom: 16px;

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

}

.card h2 {

    color: #0b5ed7;

    font-size: 20px;

    margin-bottom: 15px;

}

/* ==========================
   LABELS
========================== */

label {

    display: block;

    margin-top: 10px;

    margin-bottom: 6px;

    font-weight: bold;

    color: #444;

}

/* ==========================
   INPUTS & SELECTS
========================== */

input,
select {

    width: 100%;

    padding: 11px;

    border: 1px solid #ccc;

    border-radius: 8px;

    font-size: 15px;

    background: white;

}

input[readonly] {

    background: #f5f5f5;

}

/* ==========================
   ROUTE DISPLAY
========================== */

.routeDisplay {

    margin-top: 12px;

    padding: 10px;

    text-align: center;

    font-weight: bold;

    background: #e9f2ff;

    color: #0b5ed7;

    border-radius: 8px;

}

/* ==========================
   STATION ROW
========================== */

.stationRow {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 10px;

}
/* ==========================
   CURRENT FLIGHT
========================== */

#currentFlightCard {

    background: #f8fbff;

    border: 1px solid #d9e9ff;

    border-radius: 10px;

    padding: 15px;

}

#currentFlightCard p {

    margin: 8px 0;

    font-size: 15px;

    font-weight: 600;

}

/* ==========================
   BUTTON GRID
========================== */

.buttonGrid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));

    gap: 10px;

}

/* ==========================
   BUTTONS
========================== */

button {

    width: 100%;

    padding: 12px;

    border: none;

    border-radius: 8px;

    background: #0b5ed7;

    color: white;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: .2s;

}

button:hover {

    background: #094db2;

}

button:active {

    transform: scale(.98);

}

/* ==========================
   ACTION BUTTONS
========================== */

.actionGrid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

    gap: 10px;

}

/* ==========================
   LOG TABLE
========================== */

#logTable {

    width: 100%;

    border-collapse: collapse;

    margin-top: 10px;

    font-size: 14px;

}

#logTable thead {

    background: #0b5ed7;

    color: white;

}

#logTable th,
#logTable td {

    border: 1px solid #ddd;

    padding: 8px;

    text-align: center;

}

#logTable tbody tr:nth-child(even) {

    background: #f8f8f8;

}

#logTable tbody tr:hover {

    background: #eef6ff;

}

/* ==========================
   DELETE BUTTON
========================== */

.deleteBtn {

    background: #dc3545;

    padding: 6px 10px;

    font-size: 13px;

}

.deleteBtn:hover {

    background: #bb2d3b;

}
/* ==========================
   SETTINGS MODAL
========================== */

.modal {

    display: none;

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0,0,0,.55);

    z-index: 999;

}

.modalContent {

    background: #fff;

    width: 92%;

    max-width: 650px;

    margin: 40px auto;

    padding: 20px;

    border-radius: 12px;

    max-height: 85vh;

    overflow-y: auto;

    box-shadow: 0 10px 25px rgba(0,0,0,.25);

}

.close {

    float: right;

    font-size: 28px;

    font-weight: bold;

    cursor: pointer;

    color: #666;

}

.close:hover {

    color: #000;

}

/* ==========================
   SETTINGS LISTS
========================== */

#aircraftList,
#flightList {

    list-style: none;

    margin: 12px 0;

    padding: 0;

}

#aircraftList li,
#flightList li {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px;

    margin-bottom: 8px;

    background: #f7f7f7;

    border-radius: 8px;

}

.inputRow {

    display: grid;

    gap: 10px;

    margin-top: 15px;

}

.version {

    text-align: center;

    color: #777;

    margin-top: 20px;

    font-size: 13px;

    line-height: 1.6;

}

/* ==========================
   SCROLLABLE TABLE
========================== */

.tableWrapper {

    overflow-x: auto;

}

/* ==========================
   MOBILE RESPONSIVE
========================== */

@media (max-width: 600px) {

    .clockSection {

        grid-template-columns: 1fr;

    }

    .stationRow {

        grid-template-columns: 1fr;

    }

    .buttonGrid {

        grid-template-columns: 1fr;

    }

    .actionGrid {

        grid-template-columns: 1fr 1fr;

    }

    #logTable {

        font-size: 12px;

    }

    #logTable th,
    #logTable td {

        padding: 6px;

    }

    .modalContent {

        width: 96%;

        margin: 15px auto;

    }

}

/* ==========================
   SMALL UTILITIES
========================== */

.hidden {

    display: none !important;

}

.center {

    text-align: center;

}

.right {

    text-align: right;

}

.bold {

    font-weight: bold;

}

.mt10 {

    margin-top: 10px;

}

.mt20 {

    margin-top: 20px;

}

.mb10 {

    margin-bottom: 10px;

}

.mb20 {

    margin-bottom: 20px;

}

/* ==========================
   END OF FILE
========================== */