/* style.css — fullscreen, two-column option, sticky headers, badges */
:root{
  --bg:#101214;
  --panel:#191c20;
  --panel-edge:#0e1012;
  --text:#e9eef2;
  --accent:#f0a531;
  --ok:#9be37a; --ok-bg:#1b2a1b;
  --warn:#ffd166; --warn-bg:#2a2416;
  --bad:#ff6b6b; --bad-bg:#2a1717;
  --scale:1;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
  transform: scale(var(--scale));
  transform-origin: top left;
}

.board-wrap.full{
  position:fixed; inset:0;
  padding:2.8vmin;
  width:100vw; height:100vh;
  background:linear-gradient(#1a1d22,#121418);
  border-radius:0;
  box-shadow:inset 0 0 0 2px #0b0d10;
  overflow:hidden;
}


.board-header{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
  padding:6px 6px 8px;
  border-bottom:2px solid #262a31;
}



.board-header .logo{
  width:40px;height:40px;border-radius:10px;
  display:grid;place-items:center;
  background:#0d1014;color:#b9c4cf;
  font-size:20px;
  box-shadow:inset 0 -2px 0 #06080b, inset 0 2px 0 #161a20;
}


.board-header .title{
  letter-spacing:.1em;
  font-weight:800;
  font-size: clamp(16px, 2.8vw, 24px);
}


.board-header .terminal{
  opacity:.9;
  letter-spacing:.06em;
  font-weight:700;
  font-size: clamp(12px, 2.0vw, 16px);
}


/* Columns layout */
.columns{
  position:absolute; left:0; right:0; top:104px; bottom:0;
  padding:0 2.8vmin 2.8vmin;
  display:grid;
  grid-template-columns: 1fr;
  gap: 2.2vmin;
  overflow:hidden;
}
.columns.two{ grid-template-columns: 1fr 1fr; }

.column-group{ display:flex; flex-direction:column; min-width:0; }


.board-grid{
  display:grid;
  grid-template-columns: 2fr 0.9fr 0.9fr 1.2fr;
  gap:8px;
}





.board-grid .cell.head{
  background:transparent;
  box-shadow:none;
  color:var(--accent);
  font-weight:800;
  letter-spacing:.18em;
  font-size: clamp(12px, 1.7vw, 16px);
}



.cell.mono{
  position:relative;
  overflow:hidden;
  font-weight:700;
  font-size: clamp(13px, 1.9vw, 18px);
}


/* Sticky header row inside each column-group */

.board-head.sticky{ position:sticky; top:0; z-index:1; padding-bottom:6px; background:linear-gradient(#1a1d22,#121418) }


/* Scroll region per column */

.scroll-body{ overflow:hidden; position:relative; padding-right:0; }


.scroll-body .board-body{ padding-top:6px; padding-bottom:8px; }


/* Status styles */
.status{ position:relative; }
.status-on-time{ color: var(--ok); background: linear-gradient(#1a1f1a, var(--ok-bg)); }

.status-cancelled{ color: var(--bad); background: linear-gradient(#201214, var(--bad-bg)); }
.status::after{
  content:''; width:10px; height:10px; border-radius:50%;
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  box-shadow:0 0 8px rgba(0,0,0,.5), inset 0 0 0 2px rgba(0,0,0,.35);
}
.status-on-time::after{ background: var(--ok); }

.status-cancelled::after{ background: var(--bad); }

/* Responsive fallback */
@media (max-width:1100px){
  .columns.two{ grid-template-columns: 1fr; }
  
.board-grid{
  display:grid;
  grid-template-columns: 2fr 0.9fr 0.9fr 1.2fr;
  gap:8px;
}

  
}

/* Delayed status (replaces departed) */
.status-delayed{ color: var(--warn); background: linear-gradient(#1f1c12, var(--warn-bg)); }
.status-delayed::after{ background: var(--warn); }


.board-grid .cell{
  background:var(--panel);
  border-radius:10px;
  box-shadow:inset 0 -2px 0 var(--panel-edge), inset 0 2px 0 rgba(255,255,255,.04);
  padding:8px 10px;
  min-height:42px;
  display:flex; align-items:center;
  letter-spacing:.14em;
  text-transform:uppercase;
}


.cell.mono{
  position:relative;
  overflow:hidden;
  font-weight:700;
  font-size: clamp(13px, 1.9vw, 18px);
}

@media (max-width:900px){
  
.board-grid .cell{
  background:var(--panel);
  border-radius:10px;
  box-shadow:inset 0 -2px 0 var(--panel-edge), inset 0 2px 0 rgba(255,255,255,.04);
  padding:8px 10px;
  min-height:42px;
  display:flex; align-items:center;
  letter-spacing:.14em;
  text-transform:uppercase;
}

  
.cell.mono{
  position:relative;
  overflow:hidden;
  font-weight:700;
  font-size: clamp(13px, 1.9vw, 18px);
}

}

@media (max-width: 1100px){
  .board-grid{ grid-template-columns: 1.7fr .8fr .8fr 1.1fr; gap:6px; }
  .board-grid .cell{ min-height:38px; padding:6px 8px; }
  .cell.mono{ font-size: clamp(12px, 2.4vw, 16px); }
  .board-grid .cell.head{ font-size: clamp(11px, 2.0vw, 15px); }
}