@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --bg:#0E1428;
  --panel:#1A2142;
  --panel-alt:#212A4F;
  --stub:#161D3A;
  --accent:#E8A33D;
  --text:#EEF0F7;
  --muted:#8891AC;
  --included:#4FAE7D;
  --excluded:#D9636C;
  --divider:#333E6E;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:
    radial-gradient(1200px 500px at 50% -10%, #182052 0%, transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
  padding:32px 20px 80px;
}

/* ---------- Split-flap header ---------- */
.board-header{ max-width:980px; margin:0 auto 10px; text-align:center; }
.board-eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.3em;
  color:var(--accent);
  text-transform:uppercase;
  margin-bottom:14px;
}
.flap-row{ display:flex; justify-content:center; gap:6px; flex-wrap:wrap; }
.flap{
  background:linear-gradient(180deg,#232C54 0%, #171E3C 100%);
  border:1px solid var(--divider);
  border-radius:4px;
  width:44px; height:56px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700; font-size:26px; color:var(--text);
  position:relative; overflow:hidden;
  opacity:0; transform:translateY(-6px);
  animation:flapIn .5s ease forwards;
}
.flap.space{ background:transparent; border-color:transparent; width:14px; animation:none; opacity:1; }
.flap::after{ content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,.45); }
@keyframes flapIn{
  0%{opacity:0; transform:translateY(-10px) rotateX(90deg);}
  100%{opacity:1; transform:translateY(0) rotateX(0deg);}
}
.board-sub{ margin-top:16px; color:var(--muted); font-size:14px; }

/* ---------- Admin bar ---------- */
.admin-bar{
  max-width:980px; margin:22px auto 0;
  display:flex; justify-content:flex-end; align-items:center; gap:10px;
}
.admin-status{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.05em;
  color:var(--muted); text-transform:uppercase;
}
.admin-status.on{ color:var(--included); }
.ghost-btn{
  background:transparent; border:1px solid var(--divider); color:var(--text);
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; padding:7px 14px; border-radius:5px; cursor:pointer;
  text-decoration:none; display:inline-block;
}
.ghost-btn:hover{ border-color:var(--accent); color:var(--accent); }
.inline-form{ display:inline; }

/* ---------- Flash messages ---------- */
.flash{
  max-width:980px; margin:0 auto 20px; padding:12px 16px; border-radius:8px;
  font-size:13.5px; font-family:'Inter',sans-serif;
}
.flash-success{ background:rgba(79,174,125,.1); border:1px solid rgba(79,174,125,.4); color:var(--included); }
.flash-error{ background:rgba(217,99,108,.1); border:1px solid rgba(217,99,108,.35); color:var(--excluded); }

/* ---------- Layout ---------- */
.wrap{ max-width:980px; margin:0 auto; }

/* ---------- Manifest form ---------- */
.manifest{
  background:var(--panel); border:1px solid var(--divider); border-radius:10px;
  padding:22px 24px; margin-bottom:36px;
}
.manifest-title{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px;
  letter-spacing:.04em; color:var(--accent); text-transform:uppercase;
  margin:0 0 18px; display:flex; align-items:center; gap:8px;
}
.manifest-title::before{ content:''; width:8px; height:8px; background:var(--accent); border-radius:50%; display:inline-block; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field.full{ grid-column:1 / -1; }
.field-hint{ margin:6px 0 0; font-size:11.5px; color:var(--muted); }
label{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted);
}
input[type=text], input[type=password], input[type=number], textarea, select{
  background:var(--panel-alt); border:1px solid var(--divider); border-radius:6px;
  color:var(--text); font-family:'Inter',sans-serif; font-size:14px;
  padding:10px 12px; outline:none; transition:border-color .15s; width:100%;
}
input:focus, textarea:focus, select:focus{ border-color:var(--accent); }
textarea{ resize:vertical; min-height:70px; font-family:'Inter',sans-serif; }
select{ cursor:pointer; }

/* toggle checkboxes styled as pills, no JS required */
.toggle-group{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
.toggle{
  background:var(--panel-alt); border:1px solid var(--divider); border-radius:6px;
  padding:10px; text-align:center; cursor:pointer; user-select:none; position:relative; display:block;
}
.toggle input{ position:absolute; opacity:0; }
.toggle-label{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:6px;
}
.toggle-state{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13px; color:var(--excluded); }
.toggle-state::after{ content:'Not included'; }
.toggle input:checked ~ .toggle-state{ color:var(--included); }
.toggle input:checked ~ .toggle-state::after{ content:'Included'; }
.toggle:has(input:checked){ border-color:var(--included); }

.submit-row{ display:flex; justify-content:flex-end; margin-top:4px; }
button.post-btn{
  background:var(--accent); color:#1A1305; border:none;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:13.5px; letter-spacing:.03em;
  text-transform:uppercase; padding:12px 22px; border-radius:6px; cursor:pointer; transition:filter .15s;
}
button.post-btn:hover{ filter:brightness(1.08); }

/* ---------- Section label ---------- */
.section-label{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin:0 0 14px 4px; display:flex; justify-content:space-between;
}
.count-pill{
  background:var(--panel-alt); border:1px solid var(--divider); border-radius:20px;
  padding:2px 10px; color:var(--accent);
}

/* ---------- Ticket / boarding pass cards ---------- */
#board{ display:flex; flex-direction:column; gap:16px; }
.ticket{
  display:grid; grid-template-columns:1fr 150px; background:var(--panel);
  border:1px solid var(--divider); border-radius:10px; overflow:hidden;
}
.ticket-main{ padding:20px 22px; }
.ticket-title-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:8px; }
.ticket-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; color:var(--text); }
.ticket-company{ font-family:'Inter',sans-serif; font-weight:600; font-size:13px; color:var(--text); margin-top:4px; }
.ticket-location{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--accent); letter-spacing:.05em; margin-top:3px; }
.ticket-desc{ color:var(--muted); font-size:13.5px; line-height:1.55; margin:10px 0 16px; }
.badge-row{ display:flex; flex-wrap:wrap; gap:8px; }
.badge{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 9px; border-radius:5px; border:1px solid var(--divider); color:var(--muted);
}
.badge.yes{ color:var(--included); border-color:rgba(79,174,125,.4); background:rgba(79,174,125,.08); }
.badge.no{ color:var(--excluded); border-color:rgba(217,99,108,.35); background:rgba(217,99,108,.06); }

.ticket-stub{
  position:relative; background:var(--stub); border-left:2px dashed var(--divider);
  padding:20px 16px; display:flex; flex-direction:column; justify-content:space-between;
}
.ticket-stub::before, .ticket-stub::after{
  content:''; position:absolute; left:-11px; width:22px; height:22px; background:var(--bg); border-radius:50%;
}
.ticket-stub::before{ top:-11px; }
.ticket-stub::after{ bottom:-11px; }
.stub-block{ margin-bottom:14px; }
.stub-label{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:3px;
}
.stub-value{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px; color:var(--text); }
.void-btn{
  margin-top:auto; width:100%; background:transparent; border:1px solid var(--excluded); color:var(--excluded);
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 0; border-radius:5px; cursor:pointer; transition:background .15s, color .15s;
}
.void-btn:hover{ background:var(--excluded); color:#1A0B0D; }

.empty-state{
  text-align:center; padding:60px 20px; color:var(--muted);
  border:1px dashed var(--divider); border-radius:10px; font-size:14px;
}
.empty-state strong{ color:var(--text); display:block; margin-bottom:6px; font-family:'Space Grotesk',sans-serif; }

/* ---------- Login page ---------- */
.login-page{ display:flex; align-items:center; justify-content:center; }
.login-card{
  background:var(--panel); border:1px solid var(--divider); border-radius:10px;
  padding:32px 28px; max-width:380px; width:100%; text-align:center;
}
.login-title{ font-family:'Space Grotesk',sans-serif; font-size:20px; margin:6px 0 10px; }
.login-sub{ color:var(--muted); font-size:13.5px; line-height:1.5; margin:0 0 18px; }
.login-error{
  background:rgba(217,99,108,.1); border:1px solid rgba(217,99,108,.35); color:var(--excluded);
  border-radius:6px; padding:9px 12px; font-size:13px; margin-bottom:14px;
}
.login-form{ display:flex; flex-direction:column; gap:10px; text-align:left; }
.login-form .post-btn{ margin-top:8px; }
.back-link{ display:inline-block; margin-top:18px; color:var(--muted); font-size:12.5px; text-decoration:none; font-family:'IBM Plex Mono',monospace; }
.back-link:hover{ color:var(--accent); }

@media (max-width:600px){
  .grid2{ grid-template-columns:1fr; }
  .toggle-group{ grid-template-columns:repeat(2,1fr); }
  .ticket{ grid-template-columns:1fr; }
  .ticket-stub{ border-left:none; border-top:2px dashed var(--divider); flex-direction:column; }
  .ticket-stub::before{ top:-11px; left:calc(50% - 11px); }
  .ticket-stub::after{ display:none; }
}