/* FMX SkyVerse Fleet — visual identity carried over from the España portal so
   the two apps feel like one product, with a slightly cooler accent (sky blue)
   to differentiate fleet management from slot/codeshare authority. */
:root {
  --bg:           #0a0e14;
  --bg-card:      #121821;
  --bg-input:    #1a2230;
  --bg-elevated: #1d2533;
  --border:      #1f2937;
  --border-mid:  #2a3441;

  --text-main:   #e5e7eb;
  --text-sub:    #94a3b8;
  --text-dim:    #64748b;

  --espana:      #DA5100;
  --espana-dim:  #A83E00;
  --espana-glow: rgba(218,81,0,.14);

  --sky:         #0ea5e9;
  --sky-glow:    rgba(14,165,233,.14);
  --green:       #10b981;
  --amber:       #f59e0b;
  --red:         #ef4444;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text-main); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; line-height: 1.5; }

.top-bar { height: 4px; background: linear-gradient(90deg, var(--sky), #06b6d4, var(--sky)); }

nav {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
/* App World launcher — 3×3 dot grid, returns to the picker on click. */
.nav-launcher {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  text-decoration: none; color: var(--text-sub);
  margin-right: 4px;
  transition: background .12s;
}
.nav-launcher:hover { background: var(--bg-input); color: var(--text-main); }
.nav-launcher-dots {
  display: grid;
  grid-template-columns: repeat(3, 4px);
  grid-template-rows:    repeat(3, 4px);
  gap: 3px;
}
.nav-launcher-dots span { display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

.nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; color: var(--text-main); }
.fleet-logo    { width: 30px; height: 30px; border-radius: 6px; display: block; flex-shrink: 0; }
.fleet-logo-lg { width: 72px; height: 72px; border-radius: 14px; display: block; margin: 0 auto 20px;
                 box-shadow: 0 8px 24px rgba(14,165,233,.22); }
.nav-app   { font-size: 12px; color: var(--text-sub); letter-spacing: .04em; text-transform: uppercase; padding-left: 12px; border-left: 1px solid var(--border-mid); }
.nav-links { display: flex; gap: 4px; flex: 1; }
.nav-links a { color: var(--text-sub); text-decoration: none; padding: 7px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; }
.nav-links a:hover, .nav-links a.active { color: var(--text-main); background: var(--bg-input); }
.nav-right { display: flex; gap: 8px; align-items: center; }
.nav-user  { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 6px; font-size: 12px; color: var(--text-sub); }
.nav-user img { width: 22px; height: 22px; border-radius: 50%; }

main { max-width: 1200px; margin: 0 auto; padding: 28px; }

.page-hdr { margin-bottom: 24px; }
.page-hdr h1 { font-size: 26px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.01em; }
.page-hdr p  { margin: 0; color: var(--text-sub); font-size: 14px; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
}
.card-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-sub); margin-bottom: 10px; }

.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 880px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.stat-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.stat-val   { font-size: 28px; font-weight: 700; margin-top: 4px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 6px; border: 1px solid var(--border-mid);
  background: var(--bg-input); color: var(--text-main);
  font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--bg-elevated); }
.btn-primary { background: var(--sky); border-color: var(--sky); color: #fff; }
.btn-primary:hover { background: #0284c7; }
.btn-discord { background: #5865F2; border-color: #5865F2; color: #fff !important;
               padding: 12px 22px; font-size: 14px; font-weight: 600; }
.btn-discord:hover { background: #4752c4; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-ghost { background: transparent; }
.btn-success { background: var(--green); border-color: var(--green); color: #fff; }
.btn-danger  { background: var(--red);   border-color: var(--red);   color: #fff; }

.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--text-sub); margin-bottom: 5px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-hint { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
input, select, textarea {
  width: 100%; padding: 8px 12px; background: var(--bg-input); color: var(--text-main);
  border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sky); }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 10px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); border-bottom: 1px solid var(--border); }
td { padding: 12px; border-bottom: 1px solid var(--border); }
td.td-sub { color: var(--text-sub); }
tr:last-child td { border-bottom: none; }

.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.badge-open      { background: rgba(14,165,233,.12);  color: var(--sky); }
.badge-fulfilled { background: rgba(16,185,129,.12);  color: var(--green); }
.badge-cancelled { background: rgba(148,163,184,.12); color: var(--text-sub); }

.alert { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
.alert-info    { background: rgba(14,165,233,.08); border: 1px solid rgba(14,165,233,.25); color: #38bdf8; }
.alert-error   { background: rgba(239,68,68,.08);  border: 1px solid rgba(239,68,68,.25);  color: #f87171; }
.alert-success { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25); color: #34d399; }

.empty { text-align: center; padding: 36px 24px; color: var(--text-sub); }
.empty-icon { font-size: 32px; margin-bottom: 8px; }

footer { padding: 24px 28px; color: var(--text-dim); font-size: 11px; text-align: center; border-top: 1px solid var(--border); margin-top: 36px; }

/* Modal — used for order placement + delivery confirmation. */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 500;
                 display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
         padding: 24px; max-width: 480px; width: 100%; }
.modal-title { font-size: 17px; font-weight: 700; margin-bottom: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* Compact filter row used on market + orders + fleet pages. */
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filter-row select, .filter-row input { max-width: 220px; }

.section-hdr { display: flex; justify-content: space-between; align-items: center; }
.empty       { text-align: center; padding: 36px 18px; color: var(--text-sub); }
.empty-icon  { font-size: 28px; margin-bottom: 8px; opacity: .6; }
.td-sub      { color: var(--text-sub); }

/* Type-row card for the market — denser than a normal table row. */
.type-card { display: flex; gap: 16px; align-items: center; padding: 14px 18px;
             border-bottom: 1px solid var(--border); }
.type-card:hover { background: var(--bg-input); }
.type-card-body  { flex: 1; }
.type-card-title { font-size: 14px; font-weight: 700; }
.type-card-meta  { font-size: 11px; color: var(--text-sub); margin-top: 2px; }