:root{--border:#24304f;--text:#e7ecff;--muted:#a9b6d8;--bg1:#0b1220;--bg2:#0d1628;--card:#0b1322;--accent:#3b82f6;--accent2:#2563eb}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg1);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
.topnav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:linear-gradient(180deg,var(--bg2),var(--bg1));z-index:20}
.topnav .brand{font-weight:700;font-size:1.1rem}
.topnav nav{display:flex;gap:.5rem;align-items:center}
.topnav a, .topnav button.linklike{color:var(--text);text-decoration:none;background:transparent;border:1px solid var(--border);padding:.45rem .7rem;border-radius:10px}
.topnav a.active{background:linear-gradient(180deg,var(--accent),var(--accent2));border-color:transparent}
.wrap{max-width:1100px;margin:0 auto;padding:1rem}
.card{border:1px solid var(--border);border-radius:14px;padding:1rem;background:linear-gradient(180deg,var(--bg2),var(--card));box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th,.table td{padding:.5rem .6rem;border-bottom:1px solid #1b2a4a}
.row{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
input,select,button,textarea{background:#0f1a2e;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:.5rem .6rem}
button{cursor:pointer}
button.primary{background:linear-gradient(180deg,var(--accent),var(--accent2));border-color:transparent;color:#fff}
.small{font-size:.85rem;padding:.35rem .6rem}
.muted{color:var(--muted)}
/* Toggle switch */
.switch{position:relative;display:inline-block;width:44px;height:24px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;border:1px solid var(--border);border-radius:24px}
.slider:before{position:absolute;content:'';height:18px;width:18px;left:3px;top:2px;border-radius:50%;background:#94a3b8;transition:.2s}
input:checked + .slider{background:var(--accent2)}
input:checked + .slider:before{transform:translateX(20px);background:#e5edff}
/* Tabs */
.tabs{display:flex;gap:.5rem;margin-bottom:1rem}
.tab{padding:.5rem .8rem;border-radius:10px;border:1px solid var(--border);background:linear-gradient(180deg,var(--accent),var(--accent2));color:#fff;cursor:pointer}
.tab:not(.active){background:transparent;color:var(--text);border:1px solid var(--border)}
.tabpane{display:none}.tabpane.active{display:block}


/* Mobile refinements for iPhone 15 widths */
@media (max-width: 430px){
  .row{gap:.75rem}
  .row > label{flex:1 1 100%}
  .topnav .brand{font-size:1rem}
  .card{border-radius:16px;padding:12px}
  input,select,button,textarea{padding:.7rem .75rem;border-radius:12px}
  button{min-height:42px}
  .table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
}


/* === Logs card grid === */
.logs-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.8rem;
}
@media (max-width: 900px){ .logs-grid{ grid-template-columns:1fr; } }
.logcard{
  border:1px solid var(--border);
  border-radius:14px;
  padding:.8rem .9rem;
  background:linear-gradient(180deg,var(--bg2),var(--card));
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.logcard .topline{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:.35rem;
}
.logcard .title{ font-weight:700; }
.logcard .plane{ color:var(--muted); white-space:nowrap; }
.logcard .meta{
  color:var(--muted);
  display:flex; flex-wrap:wrap; gap:.8rem 1.2rem;
  margin:.35rem 0;
}
.logcard .comment{ margin-top:.35rem; white-space:pre-wrap; }
.logcard .pill{
  border:1px solid var(--border);
  border-radius:999px; padding:.2rem .55rem; font-size:.85rem; color:var(--text);
}
.logcard:hover{ box-shadow:0 0 0 1px rgba(59,130,246,.2), 0 6px 18px rgba(0,0,0,.25); }


/* --- Single-column New Log Entry form --- */
#logForm{ max-width: 720px; margin: 0 auto; }
#logForm .row{ display:grid; grid-template-columns: 1fr; gap:.75rem; align-items:stretch; }
#logForm .row > label{ display:flex; flex-direction:column; gap:.35rem; width:100%; }
#logForm input[type="date"],
#logForm input[type="number"],
#logForm input[type="text"],
#logForm textarea,
#logForm select { width:100%; }

/* Oil/Fuel inline toggles row */
#logForm .toggles-row{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
#logForm .toggles-row > label{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.6rem; width:auto; }


/* === Unified form grid + actions === */
.admin-form{ display:grid; grid-template-columns:1fr; gap:.75rem; }
.admin-form > label{ display:flex; flex-direction:column; gap:.35rem; width:100%; }
.card .actions{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:.5rem; }

/* Normalize button/input spacing inside #logForm */
#logForm button{ min-height:44px; }
#logForm .row{ gap:.9rem; }

.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;z-index:1000}
.modal{background:#0f172a;padding:1rem 1.25rem;border-radius:16px;min-width:300px;max-width:720px;box-shadow:0 10px 30px rgba(0,0,0,.4)}


/* === Modern Minimal Global Tweak (slight size + spacing) === */
:root{
  --base-font-size: clamp(15px, 1.0rem, 18px);
  --ui-gap-xs: .375rem;
  --ui-gap-sm: .5rem;
  --ui-gap: .75rem;
  --ui-gap-lg: 1rem;
  --ui-radius: 12px;
  --ui-pad-y: .625rem;
  --ui-pad-x: .75rem;
}
html, body {
  font-size: var(--base-font-size);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Card & container breathing room */
.card, .panel, .container, .content, .wrap .card {
  border-radius: var(--ui-radius);
  padding: calc(var(--ui-pad-y) + .25rem) calc(var(--ui-pad-x) + .25rem);
}
.card + .card { margin-top: var(--ui-gap-lg); }
section + section, .container + .container, .content > * + * { margin-top: var(--ui-gap-lg); }

/* Headings slightly larger but restrained */
h1{ font-size: 1.6em; line-height:1.2; margin: 0 0 .6em; }
h2{ font-size: 1.25em; line-height:1.25; margin: 0 0 .6em; }
h3{ font-size: 1.1em;  line-height:1.3;  margin: 0 0 .5em; }

/* Forms: inputs, selects, textareas */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="email"],
select,
textarea {
  font-size: 1em;
  padding: var(--ui-pad-y) var(--ui-pad-x);
  border-radius: var(--ui-radius);
}
label{ margin-bottom: .35rem; display:block; }

/* Buttons: size + spacing between them */
button, .btn, input[type="submit"], input[type="button"]{
  font-size: 1em;
  padding: calc(var(--ui-pad-y) + 2px) calc(var(--ui-pad-x) + 2px);
  border-radius: var(--ui-radius);
}
/* Spacing between adjacent buttons */
button + button,
.btn + .btn,
button + .btn,
.btn + button,
input[type="submit"] + .btn,
.btn + input[type="submit"],
input[type="button"] + .btn,
.btn + input[type="button"]{
  margin-left: var(--ui-gap);
}
/* If buttons are wrapped to a toolbar or group, add gaps */
.toolbar, .button-row, .btn-group, .actions, .form-actions{
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-gap);
}
/* Ensure inline buttons inside cards get a bit of separation from content above */
.card .toolbar, .card .actions { margin-top: var(--ui-gap); }

/* Toggle controls and small chips spacing */
.toggle, .chip, .pill { margin-right: var(--ui-gap-sm); }
.toggle + .toggle { margin-left: var(--ui-gap-sm); }

/* Tables and lists breathing */
table{ border-spacing: 0 var(--ui-gap-xs); }
th, td{ padding: .6rem .75rem; }
ul, ol{ padding-left: 1.15rem; }
ul > li + li, ol > li + li { margin-top: .35rem; }

/* Grid gaps (if using CSS grid layouts) */
.grid, .grid-2, .grid-3, .grid-4{ gap: var(--ui-gap); }

/* Dark mode subtle adjustments (non-intrusive) */
@media (prefers-color-scheme: dark){
  .card, .panel { box-shadow: 0 1px 2px rgba(0,0,0,.35); }
}

/* Ensure log cards at bottom breathe a bit */
.log-cards .card{ margin-bottom: var(--ui-gap-lg); }