/* =====================================================================
   Staff desk layout — supplements assets/style.css (navy/gold theme).
   Only the pieces the shared stylesheet does not define: the login card,
   the filter toolbar, the application grid and the action rows.
   Loaded after style.css, by staff.html only.
   ===================================================================== */

/* the desk is a flex item: let it shrink below its content's natural width */
#desk { min-width: 0; }

.login {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 420px;
  margin: 36px auto 0;
  padding: 26px;
}
.login h2 { font-size: 1.3rem; }
.login .hint { font-size: .92rem; color: var(--muted); margin-top: 4px; }
.login .btn { margin-top: 4px; }
.login .micro {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px;
  margin-top: 16px;
}
.toolbar .grow { flex: 1 1 200px; min-width: 0; }
.toolbar .f { flex: 1 1 160px; min-width: 0; }
.toolbar .btn { flex: 0 0 auto; }

.newform {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
  margin-top: 16px;
}
.newform .full { grid-column: 1 / -1; }
.newform .actions { justify-content: flex-end; }

.alist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.app {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  min-width: 0;
}
.app .who { font-size: 1.02rem; overflow-wrap: anywhere; }
.app .track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.app .tt { overflow-wrap: anywhere; }
.app .meta { overflow-wrap: anywhere; }
.act { border-top: 1px dashed var(--line); padding-top: 12px; }
.act select,
.act input { min-width: 0; }
.act .btn { flex: 0 1 auto; }

@media (max-width: 900px) {
  .alist { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .login { margin-top: 20px; padding: 20px; }
  .newform { grid-template-columns: minmax(0, 1fr); }
  .toolbar .grow,
  .toolbar .f,
  .toolbar .btn { flex: 1 1 100%; }
  .act input,
  .act select { flex: 1 1 100%; }
  .act .btn { flex: 1; }
}