body{
font-family: system-ui;
margin:0;
background:#f2f6fb;
}

header{
background:#0a3d62;
color:white;
text-align:center;
padding:18px;
}

.container{
max-width:520px;
margin:auto;
padding:10px;
}

.form{
background:white;
padding:10px;
border-radius:12px;
box-shadow:0 4px 14px rgba(0,0,0,0.08);
}

label{
font-weight:600;
margin-top:12px;
display:block;
}

input, select, textarea{
width:100%;
padding:12px;
margin-top:6px;
border-radius:8px;
border:1px solid #ccc;
font-size:12px;
}

textarea{
height:80px;
}

.aircraft-row {
display: flex;
align-items: center;
margin-bottom: 10px;
gap: 10px;
}

.ac-type {
font-weight: bold;
}

.ac-reg {
color: #555;
}

.save-btn{
margin-top:18px;
width:100%;
padding:14px;
background:#0a3d62;
color:white;
border:none;
border-radius:10px;
font-size:16px;
font-weight:600;
}

.time-preview{
margin-top:10px;
font-weight:600;
color:#0a3d62;
}

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

table{
width:100%;
margin-top:20px;
border-collapse:collapse;
background:white;
border-radius:10px;
}

th{
background:#0a3d62;
color:white;
padding:10px;
}

td{
padding:10px;
border-bottom:1px solid #eee;
text-align:center;
font-family: monospace;
}

@media(max-width:600px){

body{
font-size:14px;
}

}
main{
max-width:600px;
margin:auto;
padding:20px;
}

.form-section{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
margin-bottom:20px;
}

.form-group{
display: flex;
    align-items: center;
    margin-bottom: 12px;
}

label{
font-weight:600;
display:block;
width: 125px;
margin-bottom:5px;
}

input,select,textarea{
flex: 1;
width:100%;
padding:8px;
border-radius:6px;
border:1px solid #ccc;
font-size:14px;
}

button{
margin-top:15px;
width:100%;
padding:14px;
background:#0a3d62;
color:white;
border:none;
border-radius:8px;
font-size:16px;
}

.form-cell{
display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.form-cell label{
  flex: 1;
font-weight:600;
display:block;
width: 100%;
margin-bottom:5px;
margin-left: 4px;
margin-right: 4px;
}
.form-cell input{
  width: 50px;
padding:8px;
border-radius:6px;
border:1px solid #ccc;
font-size:12px;
}

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

.logbook-section{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.dropdown {
  position: relative; /* Positions the dropdown content relative to this container */
  display: inline-block;
}

.dropdown-content {
  display: none; /* Initially hides the menu */
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

/* Shows the dropdown menu when the user hovers over the dropdown container */
.dropdown:hover .dropdown-content {
  display: block;
}

.menu{

display:flex;
justify-content:center;
gap:10px;
padding:10px;
background:#e8eef5;

}

.menu a{

text-decoration:none;
background:#0a3d62;
color:white;
padding:8px 12px;
border-radius:6px;
font-size:14px;

}

.dropdown{
background:white;
border:1px solid #ccc;
border-radius:6px;
max-height:150px;
overflow-y:auto;
}

.dropdown div{
padding:10px;
cursor:pointer;
}

.dropdown div:hover{
background:#eef;
}
input[type="date"]{
padding:12px;
}




.manage-cards {
display: flex;
gap: 15px;
margin-top: 10px;
}

.card {
flex: 1;
background: white;
padding: 20px;
text-align: center;
border-radius: 12px;
text-decoration: none;
color: #333;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: 0.3s;
font-weight: 500;
}

.card:hover {
transform: translateY(-5px);
background: #007bff;
color: white;
}

.error-box {
background: #ffe6e6;
color: #cc0000;
padding: 12px;
border-radius: 6px;
margin-bottom: 10px;
font-size: 14px;
border: 1px solid #ffb3b3;
}

.success-box {
background: #e6ffe6;
color: #2d862d;
padding: 12px;
border-radius: 6px;
margin-bottom: 10px;
border: 1px solid #b3ffb3;
}

.pilot-card {
position: relative;   /* 🔥 MUST */
padding: 15px;
padding-right: 70px;  /* space for image */
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
border: 2px solid #ccc;
}

/* 🔥 TOP RIGHT IMAGE */
.pilot-photo {
position: absolute;
top: 10px;
right: 10px;   /* 🔥 THIS pushes it right */
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #ccc;
}

.pilot-photo:hover {
transform: scale(1.1);
border-color: #007bff;
}

.form-row {
display: flex;
align-items: center;
margin-bottom: 10px;
gap: 10px;
}

.form-row label {
width: 120px;      /* fixed label width */
font-weight: 600;
}

.form-row input,
.form-row select {
flex: 1;           /* take remaining space */
padding: 6px;
border: 1px solid #ccc;
border-radius: 4px;
}

@media (max-width: 600px) {
.form-row {
flex-direction: column;
align-items: flex-start;
}

.form-row label {
width: 100%;
text-align: left;
}
}

.error-box {
background: #ffe6e6;
color: #cc0000;
padding: 10px;
margin-bottom: 10px;
border-radius: 6px;
}

.pagination a {
padding: 6px 10px;
margin: 2px;
border: 1px solid #ccc;
text-decoration: none;
border-radius: 4px;
}

.pagination a:hover {
background: #007bff;
color: white;
}

.pagination a.active {
background: #007bff;
color: white;
font-weight: bold;
}

#search {
padding: 8px;
width: 250px;
margin-bottom: 10px;
}