/* ==================================================
   TurnTrack v2.0 (Build 001)
   Aircraft Turnaround UTC Logger
================================================== */

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

:root{

    --bg:#0f172a;
    --card:#1e293b;
    --card2:#273449;

    --primary:#3b82f6;
    --success:#22c55e;

    --text:#f8fafc;
    --muted:#94a3b8;

    --border:#334155;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:-apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;

    padding:18px;

}

.container{

    max-width:700px;
    margin:auto;

}

.header{

    text-align:center;
    margin-bottom:25px;

}

.header h1{

    font-size:34px;
    font-weight:700;

}

.subtitle{

    color:var(--muted);
    margin-top:6px;

}

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

.clock-section{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;

    margin-bottom:20px;

}

.clock-card{

    background:var(--card);

    border-radius:16px;

    padding:18px;

    text-align:center;

    border:1px solid var(--border);

}

.clock-label{

    color:var(--muted);

    font-size:14px;

    margin-bottom:8px;

}

.clock-time{

    font-size:32px;

    font-weight:bold;

    letter-spacing:2px;

}

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

.card{

    background:var(--card);

    border-radius:18px;

    padding:18px;

    margin-bottom:18px;

    border:1px solid var(--border);

}

.card h2{

    margin-bottom:15px;

}

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

.flight-grid{

    display:grid;

    gap:12px;

}

.flight-card{

    background:var(--card2);

    border:2px solid transparent;

    border-radius:14px;

    padding:15px;

    cursor:pointer;

    transition:.25s;

}

.flight-card:hover{

    border-color:var(--primary);

}

.flight-card.selected{

    border-color:var(--primary);

    background:#1d4ed8;

}

.flight-number{

    font-size:22px;

    font-weight:bold;

}

.flight-route{

    margin-top:5px;

    color:#dbeafe;

}
/* ==================================================
   AIRCRAFT SELECTOR
================================================== */

select{

    width:100%;

    padding:14px;

    border-radius:12px;

    border:1px solid var(--border);

    background:var(--card2);

    color:var(--text);

    font-size:16px;

    outline:none;

}

select:focus{

    border-color:var(--primary);

}

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

.current-flight{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.info-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

    border-bottom:1px solid var(--border);

}

.info-row:last-child{

    border-bottom:none;

}

.label{

    color:var(--muted);

    font-weight:600;

}

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

.event-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.event-btn{

    display:flex;

    align-items:center;

    gap:14px;

    width:100%;

    padding:16px;

    background:var(--card2);

    color:var(--text);

    border:1px solid var(--border);

    border-radius:14px;

    font-size:17px;

    cursor:pointer;

    transition:0.2s;

    text-align:left;

}

.event-btn:hover{

    border-color:var(--primary);

}

.event-btn:active{

    transform:scale(0.98);

}

/* ==================================================
   STATUS CIRCLES
================================================== */

.status-circle{

    width:16px;

    height:16px;

    border-radius:50%;

    background:#64748b;

    flex-shrink:0;

    transition:0.2s;

}

.status-circle.completed{

    background:var(--success);

}

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

.action-section{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

}

.action-btn{

    padding:14px;

    border:none;

    border-radius:12px;

    background:var(--primary);

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:0.2s;

}

.action-btn:hover{

    filter:brightness(1.08);

}

.action-btn:active{

    transform:scale(0.98);

}

.action-btn:disabled{

    opacity:0.5;

    cursor:not-allowed;

}

.danger{

    background:#dc2626;

}
/* ==================================================
   TURNAROUND LOG
================================================== */

.table-wrapper{
    overflow-x:auto;
}

table{
    width:100%;
    border-collapse:collapse;
}

thead{
    background:var(--card2);
}

th,
td{
    padding:12px;
    text-align:left;
    border-bottom:1px solid var(--border);
    font-size:15px;
}

th{
    color:var(--muted);
    font-weight:600;
}

tbody tr:hover{
    background:rgba(255,255,255,0.03);
}

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

.modal{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    z-index:999;

}

.hidden{

    display:none;

}

.modal-content{

    width:100%;
    max-width:600px;

    max-height:85vh;

    overflow-y:auto;

    background:var(--card);

    border-radius:18px;

    padding:20px;

    border:1px solid var(--border);

}

.modal-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.modal-header h2{

    margin:0;

}

#closeSettings{

    background:none;

    border:none;

    color:var(--text);

    font-size:30px;

    cursor:pointer;

}

.settings-section{

    margin-bottom:30px;

}

.settings-section h3{

    margin-bottom:12px;

}

/* ==================================================
   FOOTER
================================================== */

footer{

    margin:35px 0 20px;

    text-align:center;

    color:var(--muted);

    font-size:14px;

    line-height:1.6;

}

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

@media (max-width:600px){

    body{

        padding:14px;

    }

    .clock-section{

        grid-template-columns:1fr;

    }

    .action-section{

        grid-template-columns:1fr;

    }

    .clock-time{

        font-size:28px;

    }

    .header h1{

        font-size:30px;

    }

    .flight-number{

        font-size:20px;

    }

    .event-btn{

        font-size:16px;

        padding:18px;

    }

}

/* ==================================================
   IOS SAFE AREA
================================================== */

body{

    padding-bottom:calc(20px + env(safe-area-inset-bottom));

}