:root {
  --bg:#080b0c;
  --panel:#111516;
  --panel-2:#151b1d;
  --gold:#c9a24d;
  --gold-light:#e0bb63;
  --cream:#eee5d2;
  --muted:#a9a398;
  --border:#55492f;
  --success:#81b78c;
  --success-border:#496752;
  --danger:#d98989;
  --danger-border:#8e5050;
}

* { box-sizing:border-box; }

html, body {
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--cream);
  font-family:Georgia,"Times New Roman",serif;
}

body {
  background:radial-gradient(circle at top,#151b1d 0,#080b0c 45%);
}

button, input, select, textarea { font:inherit; }
a { color:inherit; }

.app-shell {
  min-height:100vh;
  padding-bottom:88px;
}

.app-header {
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  padding:max(14px,env(safe-area-inset-top)) 18px 14px;
  border-bottom:1px solid var(--border);
  background:rgba(8,11,12,.94);
  backdrop-filter:blur(12px);
}

.eyebrow {
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.66rem;
}

h1 {
  margin:2px 0 0;
  font-size:1.35rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.status-badge {
  padding:6px 9px;
  border:1px solid #4b5455;
  color:var(--muted);
  font-size:.64rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.status-badge.online {
  border-color:var(--success-border);
  color:var(--success);
}

.status-badge.error {
  border-color:var(--danger-border);
  color:var(--danger);
}

.app-main {
  width:min(760px,100%);
  margin:0 auto;
  padding:18px 14px 28px;
  display:grid;
  gap:14px;
}

.card, .journey-card {
  border:1px solid var(--border);
  background:var(--panel);
  padding:17px;
}

.card-label, .journey-state-label {
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.67rem;
  font-weight:bold;
}

.hero-value {
  margin-top:5px;
  font-size:1.25rem;
  font-weight:bold;
}

.muted {
  margin-top:4px;
  color:var(--muted);
  font-size:.82rem;
}

.body-copy {
  margin:7px 0 0;
  color:#d2cbbc;
  font-size:.9rem;
}

.journey-card { border-left:4px solid var(--gold); }
.journey-card.underway { border-left-color:var(--success); background:#101814; }
.journey-card.error { border-left-color:var(--danger); }

.journey-state {
  margin-top:5px;
  font-size:1.45rem;
  font-weight:bold;
  text-transform:uppercase;
}

.journey-details {
  margin-top:8px;
  color:#d2cbbc;
}

.journey-actions {
  display:grid;
  gap:9px;
  margin-top:16px;
}

.primary-button, .secondary-button {
  min-height:50px;
  border:1px solid var(--gold);
  text-transform:uppercase;
  letter-spacing:.08em;
  cursor:pointer;
  font-weight:bold;
}

.primary-button { background:var(--gold); color:#111; }
.secondary-button { background:transparent; color:var(--gold); }

.primary-button:disabled, .secondary-button:disabled {
  opacity:.45;
  cursor:not-allowed;
}

.quick-actions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.action-card {
  min-height:110px;
  padding:15px;
  border:1px solid #30393b;
  background:var(--panel-2);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.action-card strong { color:var(--gold-light); }
.action-card span { margin-top:12px; color:var(--muted); font-size:.78rem; }

.bottom-nav {
  position:fixed;
  z-index:30;
  left:0;
  right:0;
  bottom:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding-bottom:env(safe-area-inset-bottom);
  border-top:1px solid var(--border);
  background:rgba(8,11,12,.97);
  backdrop-filter:blur(12px);
}

.bottom-nav a {
  min-height:66px;
  padding:8px 4px;
  text-align:center;
  text-decoration:none;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
}

.bottom-nav a.active { color:var(--gold); }
.bottom-nav span { font-size:1.1rem; }

.bottom-nav small {
  font-size:.62rem;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.dialog-backdrop {
  position:fixed;
  z-index:100;
  inset:0;
  background:rgba(0,0,0,.78);
  display:grid;
  place-items:end center;
}

.dialog {
  width:min(760px,100%);
  max-height:90vh;
  overflow:auto;
  padding:18px;
  border:1px solid var(--border);
  background:#0d1112;
}

.dialog h2 { margin:0 0 14px; color:var(--gold-light); }

.form-grid { display:grid; gap:12px; }

.form-grid label {
  display:block;
  margin-bottom:5px;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.67rem;
  font-weight:bold;
}

.form-grid input, .form-grid select, .form-grid textarea {
  width:100%;
  padding:11px 12px;
  border:1px solid #3c4547;
  background:#090c0d;
  color:var(--cream);
}

.form-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
}

.error-text { color:#efb1b1; font-size:.82rem; }

@media(max-width:560px) {
  .quick-actions { grid-template-columns:1fr; }
  .action-card { min-height:92px; }
}

.full-width-start { grid-column:1 / -1; }
.checklist-stack { display:grid; gap:8px; }
.check-row {
  display:flex !important;
  align-items:flex-start;
  gap:9px;
  padding:10px;
  border:1px solid #31393b;
  background:#0a0e0f;
  color:var(--cream) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-size:.82rem !important;
  font-weight:normal !important;
}
.check-row input {
  width:auto !important;
  margin-top:2px;
  accent-color:var(--gold);
}
@media(max-width:560px) {
  .full-width-start { grid-column:auto; }
}


/* =========================================================
   MOBILE-ONLY START JOURNEY DIALOG FIX
========================================================= */

@media(max-width:650px) {

  .dialog-backdrop {
    align-items:flex-start;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:
      calc(env(safe-area-inset-top, 0px) + 16px)
      12px
      calc(env(safe-area-inset-bottom, 0px) + 28px);
  }

  .dialog {
    width:100%;
    margin:0 auto 28px;
    max-height:none;
    overflow:visible;
  }

  .dialog h2 {
    margin-top:0;
  }

  .form-grid {
    grid-template-columns:1fr;
  }

  .form-grid > * {
    min-width:0;
  }

  .dialog input,
  .dialog select,
  .dialog textarea {
    font-size:16px;
  }
}


/* =========================================================
   MOBILE-ONLY UNDERWAY EVENT MODAL SAFETY
   Applies to Conditions, Note, Incident and Change/Delay.
========================================================= */

@media(max-width:650px) {

  .modal {
    align-items:flex-start;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:
      calc(env(safe-area-inset-top, 0px) + 16px)
      12px
      calc(env(safe-area-inset-bottom, 0px) + 28px);
  }

  .modal-panel {
    width:100%;
    max-height:none;
    margin:0 auto 28px;
    overflow:visible;
  }

  .modal-panel h2 {
    margin-top:0;
  }

  .modal-panel .field-grid {
    grid-template-columns:1fr;
  }

  .modal-panel input,
  .modal-panel select,
  .modal-panel textarea {
    font-size:16px;
  }
}