/* Bootstrap-flavored operator dashboard. No CDN (strict CSP: style-src 'self').
   Hand-written to read like standard Bootstrap 5 utilities: system font, muted
   grays, #0d6efd primary, dense cards, full-width layout. */
:root{
  --bs-body-color:#212529; --bs-body-bg:#f8f9fa; --bs-border:#dee2e6;
  --bs-muted:#6c757d; --bs-primary:#0d6efd; --bs-secondary:#6c757d;
  --bs-success:#198754; --bs-warning:#ffc107; --bs-card:#fff;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.55; color:var(--bs-body-color); background:var(--bs-body-bg);
}
*{box-sizing:border-box}
body{margin:0}
h2{font-size:1.05rem;font-weight:600;margin:0 0 .75rem}
a{color:var(--bs-primary);text-decoration:none}
a:hover{text-decoration:underline}
small,.small{font-size:.875rem}
.text-muted{color:var(--bs-muted)}

/* ── Navbar ── */
.navbar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:#212529;color:#fff;padding:.5rem 1rem;border-bottom:1px solid #000}
.navbar-brand{font-weight:600;font-size:1rem;color:#fff}
.navbar-text{color:#adb5bd;font-size:.875rem}
.navbar-spacer{flex:1}
.navbar .btn-link{color:#dee2e6}
#nav-more{font-size:1.1rem;line-height:1}
/* Overflow menu: anchored dropdown holding secondary actions */
.navbar{position:relative}
.nav-more-menu{position:absolute;top:100%;right:.75rem;z-index:20;min-width:200px;
  display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;
  background:#fff;border:1px solid var(--bs-border);border-radius:.5rem;padding:.5rem;
  box-shadow:0 .5rem 1rem rgba(0,0,0,.15)}
.nav-more-menu[hidden]{display:none}
.nav-more-menu .btn-link{color:var(--bs-primary)}
.nav-more-menu #updated{color:var(--bs-muted);padding:.25rem .5rem;font-size:.8rem}

/* ── Buttons (Bootstrap-ish) ── */
.btn{display:inline-block;border:1px solid transparent;border-radius:.375rem;
  padding:.375rem .75rem;font:inherit;font-weight:400;cursor:pointer;
  background:#e9ecef;color:#212529;line-height:1.5}
.btn:hover{filter:brightness(.96);text-decoration:none}
.btn:disabled{opacity:.65;cursor:not-allowed;filter:none}
.btn-sm{padding:.25rem .5rem;font-size:.875rem;border-radius:.25rem}
.btn-primary{background:var(--bs-primary);border-color:var(--bs-primary);color:#fff}
.btn-secondary{background:var(--bs-secondary);border-color:var(--bs-secondary);color:#fff}
.btn-link{background:transparent;border-color:transparent;color:var(--bs-primary);padding-left:.25rem;padding-right:.25rem}
.btn-link:hover{text-decoration:underline;filter:none}
/* app.js emits bare <button> and .quiet for card/dialog actions */
.card button,.card-actions button{border:1px solid var(--bs-border);background:#fff;color:#212529;
  border-radius:.25rem;padding:.25rem .5rem;font:inherit;font-size:.875rem;cursor:pointer}
.card-actions button:not(.quiet):first-child{background:var(--bs-primary);border-color:var(--bs-primary);color:#fff}
.card-actions button:hover{filter:brightness(.96)}
.card-actions button:disabled{opacity:.65;cursor:not-allowed}
button.quiet{background:#f8f9fa;color:#495057}

/* ── Layout ── */
main{padding:1rem 1.25rem}
.alert{border:1px solid #b6d4fe;background:#cfe2ff;color:#084298;
  border-radius:.375rem;padding:.625rem .875rem;margin-bottom:1rem}
.alert.small{margin:.75rem 0 0}

/* ── Stat row (app.js: .stat > strong + span) ── */
.stat-row{display:flex;flex-wrap:wrap;gap:0;margin-bottom:1rem;
  border:1px solid var(--bs-border);border-radius:.375rem;background:var(--bs-card);overflow:hidden}
.stat{flex:1;min-width:150px;padding:.625rem 1rem;border-right:1px solid var(--bs-border)}
.stat:last-child{border-right:0}
.stat strong{display:block;font-size:1.5rem;font-weight:600;line-height:1.2}
.stat span{font-size:.8125rem;color:var(--bs-muted);text-transform:uppercase;letter-spacing:.03em}

/* ── Toolbar ── */
.toolbar{display:flex;gap:1rem;align-items:end;flex-wrap:wrap;margin-bottom:1rem}
.field label{display:block;font-size:.8125rem;color:var(--bs-muted);margin-bottom:.25rem}
input,select,textarea{display:block;padding:.375rem .625rem;border:1px solid #ced4da;
  border-radius:.375rem;font:inherit;color:#212529;background:#fff}
input:focus,select:focus,textarea:focus{outline:0;border-color:#86b7fe;box-shadow:0 0 0 .2rem rgba(13,110,253,.25)}
input[type=search]{width:320px}
.form-check{display:flex;align-items:center;gap:.4rem;height:38px}
.form-check input{margin:0}
.form-check label{font-size:.875rem;color:#495057;margin:0}
#updated{color:#adb5bd;font-size:.875rem}

/* ── Board grid ── */
.board-scroll{overflow:auto;border:1px solid var(--bs-border);border-radius:.375rem;background:var(--bs-card)}
.columns,.lane-row{display:grid;grid-template-columns:150px repeat(4,minmax(240px,1fr));min-width:1140px}
.columns{background:#f1f3f5;border-bottom:2px solid var(--bs-border);position:sticky;top:0;z-index:2}
.columns>div{padding:.625rem .75rem;font-size:.875rem;font-weight:600;border-right:1px solid var(--bs-border)}
.columns>div:last-child{border-right:0}
.col-num{color:#adb5bd;font-weight:700;margin-right:.4rem}
.columns small{display:block;font-weight:400;color:var(--bs-muted);font-size:.8125rem;margin-top:.15rem}
.lane-row{border-bottom:1px solid var(--bs-border)}
.lane-row:last-child{border-bottom:0}
.lane-title{padding:.75rem;background:#f8f9fa;font-weight:600;border-right:1px solid var(--bs-border);
  position:sticky;left:0;z-index:1}
.lane-title small{display:block;font-weight:400;color:var(--bs-muted);margin-top:.35rem;font-size:.8125rem}
.cell{padding:.5rem;min-height:140px;max-height:440px;overflow-y:auto;scrollbar-width:thin;border-right:1px solid #eceef0}
.cell:last-child{border-right:0}
/* Pastel per-stage tint so you can see which column you're in at a glance.
   Dev = grey, QA = amber/pink, Production = green, Discarded = blue-grey. */
.cell.dev{background:#f4f5f7}
.cell.qa{background:#fdf3e7}
.cell.prod{background:#eef7f0}
.cell.inactive{background:#eef1f6}
/* Match the header cells to the same tints (skip the first "Codebase" header) */
.columns>div:nth-child(2){background:#f4f5f7}
.columns>div:nth-child(3){background:#fdf3e7}
.columns>div:nth-child(4){background:#eef7f0}
.columns>div:nth-child(5){background:#eef1f6}
.empty{font-size:.875rem;color:#adb5bd;padding:1rem .5rem}

/* ── Cards ── */
.card{padding:.625rem .75rem;border:1px solid var(--bs-border);border-radius:.375rem;
  background:#fff;margin-bottom:.5rem}
.card:last-child{margin-bottom:0}
.card .provider{font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--bs-muted)}
.card h3{font-size:.875rem;font-weight:600;overflow-wrap:anywhere;margin:.35rem 0}
.card .url{font-size:.8125rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:.2rem 0}
.meta{font-size:.8125rem;color:var(--bs-muted);margin:.35rem 0;overflow-wrap:anywhere}
.card code{font-size:.8125rem;background:#f1f3f5;padding:.1rem .3rem;border-radius:.2rem;color:#495057}
.card-actions{display:flex;gap:.4rem;margin-top:.6rem;align-items:center;flex-wrap:wrap}

/* ── Badges (Bootstrap bg-*) ── */
.badge{font-size:.75rem;font-weight:600;border-radius:.25rem;padding:.2rem .4rem;display:inline-block;
  background:var(--bs-secondary);color:#fff}
.badge.fixed{background:#6f42c1;color:#fff}
.badge.qa{background:var(--bs-warning);color:#000}
.badge.prod{background:var(--bs-success);color:#fff}

/* ── Panels / sections ── */
.panel{margin-top:1.25rem;background:var(--bs-card);border:1px solid var(--bs-border);border-radius:.375rem;padding:1rem 1.25rem}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.75rem}
.panel-head h2{margin:0}
ul.tight{padding-left:1.25rem;margin:.25rem 0}
ul.tight li{margin:.2rem 0}

/* ── Promotion requests ── */
.request{display:flex;align-items:center;gap:1rem;border-top:1px solid var(--bs-border);padding:.75rem 0}
.request:first-child{border-top:0}
.request-main{flex:1}
.request h3{font-size:.875rem;font-weight:600;margin:0}
.request p{font-size:.875rem;margin:.25rem 0;color:#495057}
.request details{font-size:.875rem}

/* ── Coverage / events ── */
.coverage{display:flex;justify-content:space-between;gap:.75rem;border-bottom:1px solid var(--bs-border);padding:.5rem 0;font-size:.875rem}
.coverage:last-child{border-bottom:0}
.coverage small{display:block;color:var(--bs-muted);max-width:460px}
.event{font-size:.875rem;padding:.5rem 0;border-bottom:1px solid #eceef0;color:#495057}
.event:last-child{border-bottom:0}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}

/* ── Dialog ── */
dialog{border:1px solid var(--bs-border);border-radius:.5rem;max-width:700px;width:calc(100vw - 2rem);
  padding:1.5rem;color:#212529;box-shadow:0 .5rem 1rem rgba(0,0,0,.15)}
dialog::backdrop{background:rgba(0,0,0,.5)}
textarea{width:100%;resize:vertical;margin-top:.25rem}
#manifest{font-size:.875rem}
#manifest ul{padding-left:1.25rem;color:#664d03}
#manifest code{overflow-wrap:anywhere}

/* ── Tabs (Bootstrap nav-tabs) ── */
.tabs{display:flex;gap:.25rem;list-style:none;margin:0 0 1rem;padding:0;border-bottom:1px solid var(--bs-border)}
.tab{background:transparent;border:1px solid transparent;border-bottom:0;border-radius:.375rem .375rem 0 0;
  padding:.5rem .9rem;font:inherit;color:var(--bs-muted);cursor:pointer;margin-bottom:-1px}
.tab:hover{color:#212529;background:#f1f3f5}
.tab.active{color:#212529;background:#fff;border-color:var(--bs-border) var(--bs-border) #fff}

/* ── All ENVS dump ── */
.all-envs{border:1px solid var(--bs-border);border-radius:.375rem;background:var(--bs-card);overflow:hidden}
.env-group{border-bottom:1px solid var(--bs-border)}
.env-group:last-child{border-bottom:0}
.env-lane{font-size:.875rem;font-weight:600;margin:0;padding:.5rem .875rem;background:#f1f3f5;
  position:sticky;top:0;z-index:1}
.env-row{display:flex;align-items:baseline;gap:1rem;padding:.5rem .875rem;border-top:1px solid #eceef0;flex-wrap:wrap}
.env-head{display:flex;align-items:center;gap:.5rem;min-width:280px;flex:0 0 280px}
.env-name{font-size:.875rem;font-weight:500;overflow-wrap:anywhere}
.env-links{display:flex;flex-direction:column;gap:.15rem;flex:1;min-width:240px}
.env-links a{font-size:.875rem;overflow-wrap:anywhere}

/* ── Sticky status footer ── */
footer{position:sticky;bottom:.75rem;background:#212529;color:#fff;border-radius:.375rem;
  margin-top:1.25rem;padding:.625rem 1rem;display:none}
footer.visible{display:block}

/* ── Mobile (best-practice): stop forcing the 4-col kanban into a cramped
   side-scroll. Collapse each lane into a stacked, full-width card; each stage
   cell becomes its own labeled section. Bigger touch targets, wrapping navbar,
   stacked toolbar. ── */
@media(max-width:820px){
  main{padding:.75rem}
  .grid-2{grid-template-columns:1fr}

  /* Navbar wraps, brand takes the first line, actions flow below */
  .navbar{flex-wrap:wrap;row-gap:.5rem;padding:.625rem .875rem}
  .navbar-brand{flex:1 1 100%}
  .navbar-text{font-size:.8rem}
  .navbar .btn,.navbar button{min-height:40px}

  /* Stat row: compact 2-up grid so it doesn't eat a full screen */
  .stat-row{display:grid;grid-template-columns:1fr 1fr;margin-bottom:.75rem}
  .stat{border-right:1px solid var(--bs-border);border-bottom:1px solid var(--bs-border);padding:.5rem .75rem}
  .stat:nth-child(2n){border-right:0}
  .stat strong{font-size:1.15rem}
  .stat span{font-size:.7rem}

  /* Toolbar: everything full width, comfortable tap height */
  .toolbar{flex-direction:column;align-items:stretch;gap:.75rem}
  .toolbar .field,.toolbar input,.toolbar select{width:100%}
  input,select{min-height:44px;font-size:16px} /* 16px stops iOS zoom-on-focus */
  input[type=search]{width:100%}
  .form-check{height:auto}

  /* Board stays a side-scrolling kanban on mobile (per Nate) — narrower columns,
     lane title pinned left, and each column grows DOWN as far as it needs
     (no per-cell height cap). Momentum scroll for the horizontal swipe. */
  .board-scroll{-webkit-overflow-scrolling:touch}
  .columns,.lane-row{grid-template-columns:96px repeat(4,78vw);min-width:0}
  .lane-title{font-size:.9rem;padding:.625rem .5rem}
  .cell{max-height:none} /* columns grow vertically as much as they want */

  /* Cards: roomier tap targets */
  .card-actions{gap:.5rem}
  .card-actions button{min-height:40px;padding:.5rem .75rem}

  .request{flex-wrap:wrap}
  .panel{padding:1rem}

  /* All ENVS: name + links stack full width */
  .env-row{flex-direction:column;gap:.35rem}
  .env-head{flex:1 1 100%;min-width:0}
}